Livewire Development

Docs: search-docs for Livewire 4.

Creation

• SFC (Default): php artisan make:livewire create-post
• Multi-file: ... --mfc
• Class-based: ... --class
• Convert: php artisan livewire:convert name

Livewire 4 Differences

• Full-page: Route::livewire(). Config: component_layout.
• wire:model ignores child events (use .deep for old behavior).
• Tags must be closed.
• JS: $wire.$js.name = fn, interceptMessage.
• Alpine bundled.

Features

• Islands: @island(name: 'x') for isolation.
• Async: wire:click.async.
• Directives: wire:sort, wire:intersect, wire:ref, .renderless, .preserve-scroll.
• Loading: wire:loading, data-loading attr added automatically.

Best Practices

• wire:key in loops (mandatory).
• wire:model.live for realtime.
• Validate in actions.
• Debug via Network tab/Console

Livewire 4 JavaScript Integration

Interceptor System (v4)

Intercept Messages

js
1Livewire.interceptMessage(({ component, message, onFinish, onSuccess, onError }) => {
2    onFinish(() => { /* After response, before processing */ });
3    onSuccess(({ payload }) => { /* payload.snapshot, payload.effects */ });
4    onError(() => { /* Server errors */ });
5});

Intercept Requests

js
1Livewire.interceptRequest(({ request, onResponse, onSuccess, onError, onFailure }) => {
2    onResponse(({ response }) => { /* When received */ });
3    onSuccess(({ response, responseJson }) => { /* Success */ });
4    onError(({ response, responseBody, preventDefault }) => { /* 4xx/5xx */ });
5    onFailure(({ error }) => { /* Network failures */ });
6});

Component-Scoped Interceptors

blade
1<script>
2    this.$intercept('save', ({ component, onSuccess }) => {
3        onSuccess(() => console.log('Saved!'));
4    });
5</script>

Magic Properties

• $errors - Access validation errors from JavaScript
• $intercept - Component-scoped interceptors