livewire-development

Livewire Development

When to Apply

Activate this skill when:

• Creating or modifying Livewire components
• Using wire: directives (model, click, loading, sort, intersect)
• Implementing islands or async actions
• Writing Livewire component tests

Documentation

Use search-docs for detailed Livewire 4 patterns and documentation.

Basic Usage

Creating Components

Single-file component (default in v4)

{{ $assist->artisanCommand('make:livewire create-post') }}

Multi-file component

{{ $assist->artisanCommand('make:livewire create-post --mfc') }}

Class-based component (v3 style)

{{ $assist->artisanCommand('make:livewire create-post --class') }}

With namespace

{{ $assist->artisanCommand('make:livewire Posts/CreatePost') }}

Converting Between Formats

Use php artisan livewire:convert create-post to convert between single-file, multi-file, and class-based formats.

Component Format Reference

Format	Flag	Structure
Single-file (SFC)	default	PHP + Blade in one file
Multi-file (MFC)	--mfc	Separate PHP class, Blade, JS, tests
Class-based	--class	Traditional v3 style class
View-based	⚡ prefix	Blade-only with functional state

Single-File Component Example

Livewire 4 Specifics

Key Changes From Livewire 3

These things changed in Livewire 4, but may not have been updated in this application. Verify this application's setup to ensure you follow existing conventions.

• Use Route::livewire() for full-page components; config keys renamed: layout → component_layout, lazy_placeholder → component_placeholder.
• wire:model now ignores child events by default (use wire:model.deep for old behavior); wire:scroll renamed to wire:navigate:scroll.
• Component tags must be properly closed; wire:transition now uses View Transitions API (modifiers removed).
• JavaScript: $wire.$js('name', fn) → $wire.$js.name = fn; commit/request hooks → interceptMessage()/interceptRequest().