livewire-development

# Livewire Development ## When to Apply Activate this skill when: - Creating new Livewire components - Modifying existing component state or behavior - Debugging reactivity or lifecycle issues - Writing Livewire component tests - Adding Alpine.js interactivity to components - Working with wire: directives ## Documentation Use `search-docs` for detailed Livewire 3 patterns and documentation. ## Basic Usage ### Creating Components Use the `php artisan make:livewire [Posts\CreatePost]` Artisan command to create new components. ### Fundamental Concepts - State should live on the server, with the UI reflecting it. - All Livewire requests hit the Laravel backend; they're like regular HTTP requests. Always validate form data and run authorization checks in Livewire actions. ## Livewire 3 Specifics ### Key Changes From Livewire 2 These things changed in Livewire 3, but may not have been updated in this application. Verify this application's setup to ensure you follow existing conventions. - Use `wire:model.live` for real-time updates, `wire:model` is now deferred by default. - Components now use the `App\Livewire` namespace (not `App\Http\Livewire`). - Use `$this->dispatch()` to dispatch events (not `emit` or `dispatchBrowserEvent`). - Use the `components.layouts.app` view as the typical layout path (not `layouts.app`). ### New Directives - `wire:show`, `wire:transition`, `wire:cloak`, `wire:offline`, `wire:target` are available for use. ### Alpine Integration - Alpine is now included with Livewire; don't manually include Alpine.js. - Plugins included with Alpine: persist, intersect, collapse, and focus. ## Best Practices ### Component Structure - Livewire components require a single root element. - Use `wire:loading` and `wire:dirty` for delightful loading states. ### Using Keys in Loops <!-- Wire Key in Loops --> ```blade @foreach ($items as $item) <div wire:key="item-{{ $item->id }}"> {{ $item->name }} </div> @endforeach ``` ### Lifecycle Hooks Prefer lifecycle hooks like `mount()`, `updatedFoo()` for initialization and reactive side effects: <!-- Lifecycle Hook Examples --> ```php public function mount(User $user) { $this->user = $user; } public function updatedSearch() { $this->resetPage(); } ``` ## JavaScript Hooks You can listen for `livewire:init` to hook into Livewire initialization: <!-- Livewire Init Hook Example --> ```js document.addEventListener('livewire:init', function () { Livewire.hook('request', ({ fail }) => { if (fail && fail.status === 419) { alert('Your session expired'); } }); Livewire.hook('message.failed', (message, component) => { console.error(message); }); }); ``` ## Testing <!-- Example Livewire Component Test --> ```php Livewire::test(Counter::class) ->assertSet('count', 0) ->call('increment') ->assertSet('count', 1) ->assertSee(1) ->assertStatus(200); ``` <!-- Testing Livewire Component Exists on Page --> ```php $this->get('/posts/create') ->assertSeeLivewire(CreatePost::class); ``` ## Common Pitfalls - Forgetting `wire:key` in loops causes unexpected behavior when items change - Using `wire:model` expecting real-time updates (use `wire:model.live` instead in v3) - Not validating/authorizing in Livewire actions (treat them like HTTP requests) - Including Alpine.js separately when it's already bundled with Livewire 3