|
1 | 1 | ## Livewire 3 |
2 | 2 |
|
3 | 3 | ### Key Changes From Livewire 2 |
| 4 | +- These things changed in Livewire 2, but may not have been updated in this application. Verify this application's setup to ensure you conform with application conventions. |
| 5 | + - Use `wire:model.live` for real-time updates, `wire:model` is now deferred by default. |
| 6 | + - Components now use the `App\Livewire` namespace (not `App\Http\Livewire`). |
| 7 | + - Use `$this->dispatch()` to dispatch events (not `emit` or `dispatchBrowserEvent`). |
| 8 | + - Use the `components.layouts.app` view as the typical layout path (not `layouts.app`). |
4 | 9 |
|
5 | | -- **Namespace**: Components now use `App\Livewire` (not `App\Http\Livewire`). |
6 | | -- **Events**: Use `$this->dispatch()` (not `emit` or `dispatchBrowserEvent`). |
7 | | -- **Layout Path**: `components.layouts.app` (not `layouts.app`). |
8 | | -- **Deferred by Default**: Use `wire:model.live` for real-time updates. |
9 | | -- **Alpine Included**: Don't manually include Alpine.js. |
| 10 | +### New Directives |
| 11 | +- `wire:show`, `wire:transition`, `wire:cloak, `wire:offline`, `wire:target` are available for use. Use the documentation to find usage examples. |
10 | 12 |
|
11 | | -### Livewire Best Practices |
12 | | - |
13 | | -- Always use a **single root element** in Blade components. |
14 | | -- Always add `wire:key` in loops to prevent DOM merging errors. |
| 13 | +### Alpine |
| 14 | +- Alpine is now included with Livewire, don't manually include Alpine.js. |
| 15 | +- Plugins included with Alpine: persist, intersect, collapse, and focus. |
15 | 16 |
|
| 17 | +### Lifecycle Hooks |
| 18 | +- You can listen for `livewire:init` to hook into Livewire initialization, and `fail.status === 419` for the page expiring: |
16 | 19 | @verbatim |
17 | | -```blade |
18 | | -@foreach ($items as $item) |
19 | | - <div wire:key="item-{{ $item->id }}"> |
20 | | - {{ $item->name }} |
21 | | - </div> |
22 | | -@endforeach |
23 | | -``` |
| 20 | +<code-snippet name="livewire:load example" lang="js"> |
| 21 | +document.addEventListener('livewire:init', function () { |
| 22 | + Livewire.hook('request', ({ fail }) => { |
| 23 | + if (fail && fail.status === 419) { |
| 24 | + alert('Your session expired'); |
| 25 | + } |
| 26 | + }); |
| 27 | + |
| 28 | + Livewire.hook('message.failed', (message, component) => { |
| 29 | + console.error(message); |
| 30 | + }); |
| 31 | +}); |
| 32 | +</code-snippet> |
24 | 33 | @endverbatim |
25 | | - |
26 | | -- Use attributes to configure Livewire event listeners: |
27 | | - |
28 | | -```php |
29 | | -#[On('todo-created')] |
30 | | -public function refreshList() |
31 | | -{ |
32 | | -// ... |
33 | | -} |
34 | | -``` |
35 | | - |
36 | | -- Use `wire:loading` and `wire:dirty` to configure loading states when applicable. |
37 | | -- Use something like `wire:confirm="Are you sure?"` to confirm destructive actions. |
0 commit comments