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() . New Features Component formats: single-file (SFC), multi-file (MFC), view-based components. Islands ( @island ) for isolated updates; async actions ( wire:click.async ,
[Async]
) for parallel execution. Deferred/bundled loading: defer , lazy.bundle for optimized component loading. Feature Usage Purpose Islands @island(name: 'stats') Isolated update regions Async wire:click.async or
[Async]
Non-blocking actions Deferred defer attribute Load after page render Bundled lazy.bundle Load multiple together New Directives wire:sort , wire:intersect , wire:ref , .renderless , .preserve-scroll are available for use. data-loading attribute automatically added to elements triggering network requests. Directive Purpose wire:sort Drag-and-drop sorting wire:intersect Viewport intersection detection wire:ref Element references for JS .renderless Component without rendering .preserve-scroll Preserve scroll position Best Practices Always use wire:key in loops Use wire:loading for loading states Use wire:model.live for instant updates (default is debounced) Validate and authorize in actions (treat like HTTP requests) Configuration smart_wire_keys defaults to true ; new configs: component_locations , component_namespaces , make_command , csp_safe . Alpine & JavaScript wire:transition uses browser View Transitions API; $errors and $intercept magic properties available. Non-blocking wire:poll and parallel wire:model.live updates improve performance. For interceptors and hooks, see reference/javascript-hooks.md . Testing Livewire::test(Counter::class) ->assertSet('count', 0) ->call('increment') ->assertSet('count', 1); Verification Browser console: Check for JS errors Network tab: Verify Livewire requests return 200 Ensure wire:key on all @foreach loops Common Pitfalls Missing wire:key in loops → unexpected re-rendering Expecting wire:model real-time → use wire:model.live Unclosed component tags → syntax errors in v4 Using deprecated config keys or JS hooks Including Alpine.js separately (already bundled in Livewire 4)