public function add()
{
    $this->todos[] = $this->todo;
    $this->reset('todo');
}

}; ?>

Multi-file (for complex components)

php artisan make:livewire post.create --mfc

Creates: resources/views/components/post/⚡create/ with separate .php, .blade.php, .js, .css files.

Page components

php artisan make:livewire pages::post.create

Route with: Route::livewire('/posts/create', 'pages::post.create');

Core Patterns

Properties

Public properties auto-available in Blade
Use $this->reset('prop') to reset
Use $this->fill([...]) for bulk assignment
Protected properties hidden from client (not persisted)

Data Binding

<input wire:model="title">           <!-- Syncs on action -->
<input wire:model.live="search">     <!-- Syncs on input -->
<input wire:model.blur="email">      <!-- Syncs on blur -->

Actions

<button wire:click="save">Save</button>
<button wire:click="delete({{ $id }})">Delete</button>
<form wire:submit="store">...</form>

Computed Properties

use Livewire\Attributes\Computed;

#[Computed]
public function posts()
{
    return Post::latest()->get();
}

Access in Blade: $this->posts

Event Modifiers

wire:click.prevent - preventDefault
wire:keydown.enter - specific key
wire:click.debounce.500ms - debounce
wire:submit.throttle - throttle

Loading States

<button wire:click="save" class="data-loading:opacity-50">
    Save
</button>
<span class="not-data-loading:hidden">Saving...</span>

Confirmation

<button wire:click="delete" wire:confirm="Are you sure?">Delete</button>

Security

Always validate and authorize — public properties can be manipulated client-side.

public function delete(Post $post)
{
    $this->authorize('delete', $post);
    $post->delete();
}

Detailed References

Load these as needed:

Components deep dive: See references/components.md
Properties & state: See references/properties.md
Actions & events: See references/actions.md

livewire-4

Livewire 4

Component Formats

Single-file (default, recommended)