Laravel Livewire

Laravel Livewire

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Check existing Livewire components 2. fuse-ai-pilot:research-expert - Verify Livewire 3 patterns via Context7 3. mcp__context7__query-docs - Check specific Livewire features

After implementation, run fuse-ai-pilot:sniper for validation.

---

Overview

---

Critical Rules

1. Always use wire:key in loops 2. Use wire:model.blur for validation, not .live everywhere 3. Debounce search inputs with .debounce.300ms 4. #[Locked] for sensitive IDs 5. authorize() in destructive actions 6. protected methods for internal logic

---

Decision Guide

Component Type

Component choice?
├── Complex logic → Class-based component
├── Simple page → Volt functional API
├── Medium complexity → Volt class-based
├── Quick embed → @volt inline
└── File-based route → Folio + Volt

Data Binding

Binding type?
├── Form fields → wire:model.blur
├── Search input → wire:model.live.debounce.300ms
├── Checkbox/toggle → wire:model.live
├── Select → wire:model
└── No sync → Local Alpine x-data

---

Reference Guide

Core Concepts (WHY & Architecture)

Advanced Features

Templates (Complete Code)

---

Quick Reference

Basic Component

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Volt Functional

<?php
use function Livewire\Volt\{state};

state(['count' => 0]);

$increment = fn() => $this->count++;
?>

<button wire:click="increment">{{ $count }}</button>

Wire Directives

<input wire:model.blur="email">
<input wire:model.live.debounce.300ms="search">
<button wire:click="save" wire:loading.attr="disabled">Save</button>

---

Best Practices

DO

• Use wire:key in @foreach loops
• Debounce search/filter inputs
• Use Form Objects for reusable logic
• Test with Livewire::test()
• #[Locked] for IDs, #[Computed] for derived data

DON'T

• wire:model.live on every field
• Query in render() method
• Forget authorization in actions
• Skip wire:key in loops
• Store sensitive data in public properties

---

Laravel 13 Notes

Livewire 4 sur Laravel 13

Livewire 4 est la version compatible Laravel 13. Changements clés :

• PHP 8.3 minimum (était 8.2 sur Livewire 3)
• wire:model.live rate-limited par défaut (300ms debounce implicite)
• #[Locked], #[Computed], #[On] toujours supportés
• Volt et Folio : versions majeures alignées (Volt 2, Folio 2)
• PreventRequestForgery : routes /livewire/update gérées automatiquement, pas de config requise

Migration depuis Livewire 3

• wire:poll.5s → toujours valide
• $this->dispatch('event') → toujours valide
• Form Objects (#[\Livewire\Attributes\Validate]) → API stable

Alpine.js Integration

Decision Tree

Interactivity type?
├── Read property → $wire.property
├── Call method → $wire.method()
├── Two-way sync → $wire.entangle('prop')
├── Set value → $wire.set('prop', value)
├── Toggle boolean → $wire.toggle('prop')
└── Listen events → $wire.$on('event', fn)

$wire API

$wire Properties

@entangle

Event Methods

File Upload

@script Directive

Hooks

Watch Property

Best Practices

→ See template: AlpineIntegration.blade.md

Livewire Components

Decision Tree

Component type?
├── Multi-file (Class + Blade) → php artisan make:livewire
├── Single-file (Volt functional) → state(), computed()
├── Single-file (Volt class) → new class extends Component
├── Inline in page → @volt directive
└── Full-page route → Route::livewire()

Component Types

Artisan Commands

Rendering Methods

Property Types

Class Structure

Volt Functional API

Best Practices

→ See templates: BasicComponent.php.md, VoltComponent.blade.md

Events

Decision Tree

Communication type?
├── Component → Component → dispatch() + #[On]
├── Parent → Child → Props or $parent
├── Child → Parent → dispatch() to parent
├── Component → Browser → dispatch() + JS listener
├── Browser → Component → JS dispatch + wire:event
└── Alpine ↔ Livewire → $wire, @entangle

Dispatch Methods

Listening Methods

JavaScript API

Browser Events

$wire in Alpine

@entangle

Event Data

Best Practices

→ See template: NestedComponents.php.md

File Uploads

Decision Tree

Upload type?
├── Single file → use WithFileUploads + $file
├── Multiple files → $files array + multiple
├── Image preview → $file->temporaryUrl()
├── Progress bar → wire:loading with target
└── Validation → #[Validate] with file rules

Setup

Validation Rules

Temporary Files

Storage

Multiple Files

Progress Tracking

Chunk Upload

Cleanup

Best Practices

→ See template: FileUploadComponent.php.md

Folio - File-Based Routing

When to Use

---

Installation

composer require laravel/folio
php artisan folio:install

---

Route Conventions

---

Decision Tree

Need a page route?
├── Simple static page → pages/name.blade.php
├── Dynamic with ID → pages/[id].blade.php
├── Model binding → pages/[Model].blade.php
│   └── Custom key → pages/[Model:slug].blade.php
├── Catch-all segments → pages/[...segments].blade.php
└── Nested structure → pages/section/page.blade.php

---

Key Functions

---

Quick Patterns

Named Route

<?php use function Laravel\Folio\name; name('dashboard'); ?>

Middleware

<?php use function Laravel\Folio\middleware; middleware(['auth', 'verified']); ?>

Model Binding with Custom Key

pages/posts/[Post:slug].blade.php → /posts/my-post-slug

Render Hook

<?php
use function Laravel\Folio\render;
render(function ($view, Post $post) {
    abort_unless(auth()->user()->can('view', $post), 403);
    return $view->with('related', $post->related);
});
?>

---

Multi-Path Configuration

// AppServiceProvider.php
Folio::path(resource_path('views/pages/guest'))->uri('/');
Folio::path(resource_path('views/pages/admin'))
    ->uri('/admin')
    ->middleware(['*' => ['auth', 'verified']]);

---

Subdomain Routing

Folio::domain('{tenant}.example.com')
    ->path(resource_path('views/pages/tenant'));

---

Commands

---

Best Practices

DO

• Use for simple, view-centric pages
• Name routes for URL generation
• Apply middleware at path level for groups
• Use model binding for cleaner code

DON'T

• Put complex logic in Blade files
• Forget route:cache in production
• Mix Folio and controller routes for same resource

Forms & Validation

Decision Tree

Form complexity?
├── Simple (few fields) → Inline #[Validate]
├── Reusable → Form Object class
├── Real-time validation → wire:model.blur + rules
├── File upload → WithFileUploads trait
└── Complex logic → Form Object + methods

Validation Attributes

Form Object

Real-Time Validation

Error Display

Form Object Methods

Validation Hooks

Error Bag

Best Practices

→ See template: FormComponent.php.md

Lifecycle Hooks

Decision Tree

When to hook?
├── Initial render only → mount()
├── Every request → boot()
├── Subsequent requests → hydrate()
├── Before property update → updating()
├── After property update → updated()
├── Before serialization → dehydrate()
└── Handle exceptions → exception()

Hook Order

Property-Specific Hooks

mount() Parameters

hydrate() Use Cases

dehydrate() Use Cases

Form Object Hooks

exception() Hook

Best Practices

→ See template: BasicComponent.php.md

Loading States

Decision Tree

Loading type?
├── Show while loading → wire:loading
├── Hide while loading → wire:loading.remove
├── Disable element → wire:loading.attr="disabled"
├── Add class → wire:loading.class="opacity-50"
├── Target action → wire:target="save"
└── Lazy component → #[Lazy] attribute

wire:loading Modifiers

wire:target

#[Lazy] Component

Placeholder Method

wire:intersect

Skeleton Patterns

Loading Button Pattern

Best Practices

→ See template: LoadingStates.blade.md

SPA Navigation

Decision Tree

Navigation need?
├── SPA behavior → wire:navigate
├── Prefetch on hover → wire:navigate.hover
├── Keep element → @persist
├── Active link style → data-current
└── Full page reload → Normal <a> tag

wire:navigate

@persist Directive

Active Link Styling

Navigation Events

JavaScript Listeners

Configuration

Progress Bar

Best Practices

→ See also: volt.md for Volt routes

Nesting Components

Decision Tree

Communication direction?
├── Parent → Child → Props (normal or #[Reactive])
├── Child → Parent → Events or $parent
├── Two-way binding → #[Modelable]
├── Child updates parent → dispatch() event
└── Access parent method → $parent.method()

Passing Props

#[Reactive] Props

#[Modelable] Props

Accessing Parent

Event Communication

wire:key Rules

Props vs Events

Computed in Parent

Best Practices

→ See template: NestedComponents.php.md

Precognition - Live Validation

When to Use

---

Installation

---

Backend Setup

Route::post('/users', fn(StoreUserRequest $r) => ...)
    ->middleware([HandlePrecognitiveRequests::class]);

---

Form Object API

---

Quick Patterns

Vue

<input v-model="form.name" @change="form.validate('name')">
<div v-if="form.invalid('name')">{{ form.errors.name }}</div>

React

<input
  value={form.data.name}
  onChange={(e) => form.setData('name', e.target.value)}
  onBlur={() => form.validate('name')}
/>

Alpine

<input x-model="form.name" @change="form.validate('name')">
<template x-if="form.invalid('name')">
  <div x-text="form.errors.name"></div>
</template>

---

Wizard Validation

form.validate({
    only: ['name', 'email'],
    onSuccess: () => nextStep(),
});

---

Customizing Rules

'password' => [
    'required',
    $this->isPrecognitive()
        ? Password::min(8)
        : Password::min(8)->uncompromised(),
],

---

File Uploads

'avatar' => [
    ...$this->isPrecognitive() ? [] : ['required'],
    'image', 'max:2048',
],

---

Testing

$this->withPrecognition()
    ->post('/register', ['name' => 'John'])
    ->assertSuccessfulPrecognition();

---

Best Practices

DO

• Use HandlePrecognitiveRequests middleware
• Debounce with setValidationTimeout()
• Skip heavy rules with isPrecognitive()

DON'T

• Include files in precognitive requests
• Count interactions on precognitive requests

Reverb - WebSocket Server

When to Use

---

Installation

php artisan install:broadcasting

---

Environment Variables

---

Commands

---

Production Setup

System Limits

# /etc/security/limits.conf
forge soft nofile 10000
forge hard nofile 10000

Event Loop (>1000 connections)

pecl install uv

Nginx Proxy

location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://0.0.0.0:8080;
}

Supervisor

[program:reverb]
command=php artisan reverb:start
autostart=true
autorestart=true

[supervisord]
minfds=10000

---

SSL with Herd/Valet

php artisan reverb:start --hostname="laravel.test"

---

Pulse Monitoring

'recorders' => [
    ReverbConnections::class => ['sample_rate' => 1],
    ReverbMessages::class => ['sample_rate' => 1],
],

---

Horizontal Scaling

1. REVERB_SCALING_ENABLED=true 2. Configure central Redis 3. Deploy multiple instances 4. Load balancer in front

---

Best Practices

DO

• Use Supervisor in production
• Enable ext-uv for high connections
• Monitor with Pulse

DON'T

• Run without process manager
• Skip SSL in production
• Ignore file limits

Security

Decision Tree

Security concern?
├── Protect property → #[Locked]
├── Hide from snapshot → #[Sensitive]
├── Check permission → $this->authorize()
├── Limit requests → rateLimit()
├── Protect method → Use protected/private
└── CSRF → Automatic in forms

#[Locked] Attribute

#[Sensitive] Attribute

Authorization

Protected Methods

Rate Limiting

CSRF Protection

XSS Protection

Route Middleware

Best Practices

→ See template: SecureComponent.php.md

Basic Livewire Component

app/Livewire/CreatePost.php

<?php

namespace App\Livewire;

use App\Models\Post;
use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Locked;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;

class CreatePost extends Component
{
    #[Locked]
    public int $userId;

    #[Validate('required|min:5|max:255')]
    public string $title = '';

    #[Validate('required|min:10')]
    public string $content = '';

    #[Validate('nullable|array')]
    public array $tags = [];

    public bool $published = false;

    /**
     * Initialize component.
     */
    public function mount(): void
    {
        $this->userId = Auth::id();
    }

    /**
     * Computed property - cached per request.
     */
    #[Computed]
    public function wordCount(): int
    {
        return str_word_count($this->content);
    }

    /**
     * Computed with persistence across requests.
     */
    #[Computed(persist: true)]
    public function userPosts(): int
    {
        return Post::where('user_id', $this->userId)->count();
    }

    /**
     * Property updated hook.
     */
    public function updatedTitle(string $value): void
    {
        $this->title = ucwords($value);
    }

    /**
     * Save post action.
     */
    public function save(): void
    {
        $validated = $this->validate();

        $post = Post::create([
            'user_id' => $this->userId,
            'title' => $validated['title'],
            'content' => $validated['content'],
            'tags' => $validated['tags'],
            'published_at' => $this->published ? now() : null,
        ]);

        $this->dispatch('post-created', postId: $post->id);

        session()->flash('message', 'Post created successfully!');

        $this->redirect(route('posts.show', $post));
    }

    /**
     * Reset form.
     */
    public function resetForm(): void
    {
        $this->reset(['title', 'content', 'tags', 'published']);
        $this->resetValidation();
    }

    /**
     * Listen for external events.
     */
    #[On('tag-selected')]
    public function addTag(string $tag): void
    {
        if (!in_array($tag, $this->tags)) {
            $this->tags[] = $tag;
        }
    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

resources/views/livewire/create-post.blade.php

<div class="max-w-2xl mx-auto p-6">
    <h1 class="text-2xl font-bold mb-6">Create New Post</h1>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('message') }}
        </div>
    @endif

    <form wire:submit="save" class="space-y-4">
        {{-- Title --}}
        <div>
            <label for="title" class="block text-sm font-medium">Title</label>
            <input
                type="text"
                id="title"
                wire:model.blur="title"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
                placeholder="Enter post title"
            >
            @error('title')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        {{-- Content --}}
        <div>
            <label for="content" class="block text-sm font-medium">Content</label>
            <textarea
                id="content"
                wire:model.live.debounce.500ms="content"
                rows="6"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
                placeholder="Write your post content..."
            ></textarea>
            @error('content')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
            <p class="text-sm text-gray-500 mt-1">
                Word count: {{ $this->wordCount }}
            </p>
        </div>

        {{-- Tags --}}
        <div>
            <label class="block text-sm font-medium">Tags</label>
            <div class="flex flex-wrap gap-2 mt-2">
                @foreach ($tags as $index => $tag)
                    <span
                        wire:key="tag-{{ $index }}"
                        class="bg-blue-100 text-blue-800 px-2 py-1 rounded"
                    >
                        {{ $tag }}
                        <button
                            type="button"
                            wire:click="$set('tags', array_values(array_diff($tags, ['{{ $tag }}'])))"
                            class="ml-1 text-blue-600 hover:text-blue-800"
                        >&times;</button>
                    </span>
                @endforeach
            </div>
        </div>

        {{-- Published --}}
        <div class="flex items-center">
            <input
                type="checkbox"
                id="published"
                wire:model="published"
                class="rounded border-gray-300"
            >
            <label for="published" class="ml-2 text-sm">
                Publish immediately
            </label>
        </div>

        {{-- Actions --}}
        <div class="flex gap-4">
            <button
                type="submit"
                class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
                wire:loading.attr="disabled"
                wire:target="save"
            >
                <span wire:loading.remove wire:target="save">Save Post</span>
                <span wire:loading wire:target="save">Saving...</span>
            </button>

            <button
                type="button"
                wire:click="resetForm"
                class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300"
            >
                Reset
            </button>
        </div>
    </form>

    <p class="text-sm text-gray-500 mt-4">
        You have {{ $this->userPosts }} posts
    </p>
</div>

Usage

{{-- In any Blade view --}}
<livewire:create-post />

{{-- Or as full-page route --}}
// routes/web.php
Route::livewire('/posts/create', CreatePost::class)
    ->middleware(['auth'])
    ->name('posts.create');

Component Testing

tests/Feature/Livewire/CreatePostTest.php

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\CreatePost;
use App\Models\Post;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Livewire;
use Tests\TestCase;

class CreatePostTest extends TestCase
{
    use RefreshDatabase;

    private User $user;

    protected function setUp(): void
    {
        parent::setUp();
        $this->user = User::factory()->create();
    }

    /** @test */
    public function can_render_component(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->assertStatus(200)
            ->assertSee('Create New Post');
    }

    /** @test */
    public function can_create_post(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', 'My Test Post')
            ->set('content', 'This is the content of my test post.')
            ->set('published', true)
            ->call('save')
            ->assertRedirect(route('posts.show', Post::first()));

        $this->assertDatabaseHas('posts', [
            'user_id' => $this->user->id,
            'title' => 'My Test Post',
            'content' => 'This is the content of my test post.',
        ]);

        $this->assertNotNull(Post::first()->published_at);
    }

    /** @test */
    public function validates_required_fields(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', '')
            ->set('content', '')
            ->call('save')
            ->assertHasErrors(['title' => 'required', 'content' => 'required']);
    }

    /** @test */
    public function validates_minimum_length(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', 'Hi')
            ->set('content', 'Short')
            ->call('save')
            ->assertHasErrors([
                'title' => 'min',
                'content' => 'min',
            ]);
    }

    /** @test */
    public function can_reset_form(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', 'My Title')
            ->set('content', 'My Content')
            ->call('resetForm')
            ->assertSet('title', '')
            ->assertSet('content', '')
            ->assertHasNoErrors();
    }

    /** @test */
    public function dispatches_event_on_save(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', 'Event Test Post')
            ->set('content', 'Testing event dispatching.')
            ->call('save')
            ->assertDispatched('post-created');
    }

    /** @test */
    public function listens_to_tag_selected_event(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->dispatch('tag-selected', tag: 'laravel')
            ->assertSet('tags', ['laravel']);
    }

    /** @test */
    public function transforms_title_on_update(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', 'my lowercase title')
            ->assertSet('title', 'My Lowercase Title');
    }

    /** @test */
    public function computes_word_count(): void
    {
        $this->actingAs($this->user);

        $component = Livewire::test(CreatePost::class)
            ->set('content', 'This is five words here');

        $this->assertEquals(5, $component->get('wordCount'));
    }

    /** @test */
    public function shows_flash_message_on_success(): void
    {
        $this->actingAs($this->user);

        Livewire::test(CreatePost::class)
            ->set('title', 'Flash Message Test')
            ->set('content', 'Testing flash messages work correctly.')
            ->call('save');

        $this->assertEquals('Post created successfully!', session('message'));
    }
}

tests/Feature/Livewire/VoltTest.php

<?php

namespace Tests\Feature\Livewire;

use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Volt\Volt;
use Tests\TestCase;

class VoltTest extends TestCase
{
    use RefreshDatabase;

    /** @test */
    public function counter_increments(): void
    {
        Volt::test('counter')
            ->assertSee('0')
            ->call('increment')
            ->assertSee('1')
            ->call('increment')
            ->assertSee('2');
    }

    /** @test */
    public function counter_can_reset(): void
    {
        Volt::test('counter')
            ->set('count', 10)
            ->call('reset')
            ->assertSet('count', 0);
    }

    /** @test */
    public function user_profile_validates(): void
    {
        $user = User::factory()->create();

        Volt::test('user-profile', ['user' => $user])
            ->set('name', '')
            ->set('email', 'invalid')
            ->call('save')
            ->assertHasErrors([
                'name' => 'required',
                'email' => 'email',
            ]);
    }

    /** @test */
    public function user_profile_updates(): void
    {
        $user = User::factory()->create();

        Volt::test('user-profile', ['user' => $user])
            ->set('name', 'New Name')
            ->set('email', 'new@example.com')
            ->call('save')
            ->assertHasNoErrors();

        $this->assertDatabaseHas('users', [
            'id' => $user->id,
            'name' => 'New Name',
            'email' => 'new@example.com',
        ]);
    }
}

tests/Feature/Livewire/FileUploadTest.php

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\UploadAvatar;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Livewire\Livewire;
use Tests\TestCase;

class FileUploadTest extends TestCase
{
    use RefreshDatabase;

    /** @test */
    public function can_upload_avatar(): void
    {
        Storage::fake('public');

        $user = User::factory()->create();
        $this->actingAs($user);

        $file = UploadedFile::fake()->image('avatar.jpg', 200, 200);

        Livewire::test(UploadAvatar::class)
            ->set('photo', $file)
            ->call('save')
            ->assertHasNoErrors();

        Storage::disk('public')->assertExists('avatars/' . $file->hashName());

        $this->assertNotNull($user->fresh()->avatar);
    }

    /** @test */
    public function validates_file_type(): void
    {
        Storage::fake('public');

        $user = User::factory()->create();
        $this->actingAs($user);

        $file = UploadedFile::fake()->create('document.pdf', 100);

        Livewire::test(UploadAvatar::class)
            ->set('photo', $file)
            ->call('save')
            ->assertHasErrors(['photo' => 'image']);
    }

    /** @test */
    public function validates_file_size(): void
    {
        Storage::fake('public');

        $user = User::factory()->create();
        $this->actingAs($user);

        $file = UploadedFile::fake()->image('large.jpg')->size(3000); // 3MB

        Livewire::test(UploadAvatar::class)
            ->set('photo', $file)
            ->call('save')
            ->assertHasErrors(['photo' => 'max']);
    }

    /** @test */
    public function can_remove_avatar(): void
    {
        Storage::fake('public');

        $user = User::factory()->create(['avatar' => 'avatars/old.jpg']);
        Storage::disk('public')->put('avatars/old.jpg', 'content');

        $this->actingAs($user);

        Livewire::test(UploadAvatar::class)
            ->call('removeAvatar');

        Storage::disk('public')->assertMissing('avatars/old.jpg');
        $this->assertNull($user->fresh()->avatar);
    }
}

tests/Feature/Livewire/DataTableTest.php

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\UserTable;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Livewire;
use Tests\TestCase;

class DataTableTest extends TestCase
{
    use RefreshDatabase;

    /** @test */
    public function can_search_users(): void
    {
        $admin = User::factory()->create();
        $this->actingAs($admin);

        User::factory()->create(['name' => 'John Doe']);
        User::factory()->create(['name' => 'Jane Smith']);

        Livewire::test(UserTable::class)
            ->set('search', 'John')
            ->assertSee('John Doe')
            ->assertDontSee('Jane Smith');
    }

    /** @test */
    public function can_sort_by_column(): void
    {
        $admin = User::factory()->create();
        $this->actingAs($admin);

        User::factory()->create(['name' => 'Alice']);
        User::factory()->create(['name' => 'Bob']);

        Livewire::test(UserTable::class)
            ->call('sortBy', 'name')
            ->assertSet('sortField', 'name')
            ->assertSet('sortDirection', 'asc');
    }

    /** @test */
    public function can_filter_by_status(): void
    {
        $admin = User::factory()->create();
        $this->actingAs($admin);

        User::factory()->create(['status' => 'active']);
        User::factory()->create(['status' => 'inactive']);

        Livewire::test(UserTable::class)
            ->set('status', 'active')
            ->assertSee('active')
            ->assertDontSee('inactive');
    }

    /** @test */
    public function can_paginate(): void
    {
        $admin = User::factory()->create();
        $this->actingAs($admin);

        User::factory()->count(25)->create();

        Livewire::test(UserTable::class)
            ->set('perPage', 10)
            ->assertSee('1')
            ->assertSee('2')
            ->assertSee('3');
    }
}

Data Table Component

app/Livewire/UserTable.php

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;

class UserTable extends Component
{
    use WithPagination;

    #[Url]
    public string $search = '';

    #[Url]
    public string $sortField = 'created_at';

    #[Url]
    public string $sortDirection = 'desc';

    #[Url]
    public int $perPage = 10;

    #[Url]
    public string $status = '';

    /**
     * Reset pagination when search changes.
     */
    public function updatedSearch(): void
    {
        $this->resetPage();
    }

    /**
     * Reset pagination when filters change.
     */
    public function updatedStatus(): void
    {
        $this->resetPage();
    }

    /**
     * Sort by column.
     */
    public function sortBy(string $field): void
    {
        if ($this->sortField === $field) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortField = $field;
            $this->sortDirection = 'asc';
        }
    }

    /**
     * Get paginated users.
     */
    #[Computed]
    public function users()
    {
        return User::query()
            ->when($this->search, function ($query) {
                $query->where(function ($q) {
                    $q->where('name', 'like', "%{$this->search}%")
                      ->orWhere('email', 'like', "%{$this->search}%");
                });
            })
            ->when($this->status, function ($query) {
                $query->where('status', $this->status);
            })
            ->orderBy($this->sortField, $this->sortDirection)
            ->paginate($this->perPage);
    }

    /**
     * Delete user.
     */
    public function deleteUser(int $id): void
    {
        $user = User::findOrFail($id);
        $this->authorize('delete', $user);

        $user->delete();

        session()->flash('message', 'User deleted successfully.');
    }

    /**
     * Export users.
     */
    public function export(): void
    {
        // Implementation for export
        $this->dispatch('export-started');
    }

    public function render()
    {
        return view('livewire.user-table');
    }
}

resources/views/livewire/user-table.blade.php

<div class="bg-white rounded-lg shadow">
    {{-- Header --}}
    <div class="p-4 border-b flex justify-between items-center">
        <h2 class="text-lg font-semibold">Users</h2>

        <button wire:click="export" class="bg-green-500 text-white px-4 py-2 rounded text-sm">
            Export
        </button>
    </div>

    {{-- Filters --}}
    <div class="p-4 border-b bg-gray-50 flex gap-4 items-center">
        {{-- Search --}}
        <div class="flex-1">
            <input
                type="text"
                wire:model.live.debounce.300ms="search"
                placeholder="Search users..."
                class="w-full rounded border-gray-300"
            >
        </div>

        {{-- Status Filter --}}
        <select wire:model.live="status" class="rounded border-gray-300">
            <option value="">All Status</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
            <option value="pending">Pending</option>
        </select>

        {{-- Per Page --}}
        <select wire:model.live="perPage" class="rounded border-gray-300">
            <option value="10">10 per page</option>
            <option value="25">25 per page</option>
            <option value="50">50 per page</option>
        </select>
    </div>

    {{-- Flash Message --}}
    @if (session()->has('message'))
        <div class="p-4 bg-green-100 text-green-700">
            {{ session('message') }}
        </div>
    @endif

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left">
                        <button wire:click="sortBy('name')" class="flex items-center gap-1 font-semibold">
                            Name
                            @if ($sortField === 'name')
                                <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </button>
                    </th>
                    <th class="px-4 py-3 text-left">
                        <button wire:click="sortBy('email')" class="flex items-center gap-1 font-semibold">
                            Email
                            @if ($sortField === 'email')
                                <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </button>
                    </th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left">
                        <button wire:click="sortBy('created_at')" class="flex items-center gap-1 font-semibold">
                            Created
                            @if ($sortField === 'created_at')
                                <span>{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
                            @endif
                        </button>
                    </th>
                    <th class="px-4 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse ($this->users as $user)
                    <tr wire:key="user-{{ $user->id }}" class="hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <img
                                    src="{{ $user->avatar_url }}"
                                    alt="{{ $user->name }}"
                                    class="w-8 h-8 rounded-full"
                                >
                                <span class="font-medium">{{ $user->name }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-600">{{ $user->email }}</td>
                        <td class="px-4 py-3">
                            <span @class([
                                'px-2 py-1 rounded text-xs font-medium',
                                'bg-green-100 text-green-800' => $user->status === 'active',
                                'bg-gray-100 text-gray-800' => $user->status === 'inactive',
                                'bg-yellow-100 text-yellow-800' => $user->status === 'pending',
                            ])>
                                {{ ucfirst($user->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            {{ $user->created_at->format('M d, Y') }}
                        </td>
                        <td class="px-4 py-3 text-right">
                            <a
                                href="{{ route('users.edit', $user) }}"
                                class="text-blue-600 hover:underline mr-3"
                            >
                                Edit
                            </a>
                            <button
                                wire:click="deleteUser({{ $user->id }})"
                                wire:confirm="Are you sure you want to delete this user?"
                                class="text-red-600 hover:underline"
                            >
                                Delete
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                            No users found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div class="p-4 border-t">
        {{ $this->users->links() }}
    </div>

    {{-- Loading Overlay --}}
    <div
        wire:loading.flex
        wire:target="search, sortBy, perPage, status, deleteUser"
        class="absolute inset-0 bg-white/50 items-center justify-center"
    >
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
    </div>
</div>

Usage

<livewire:user-table />

File Upload Component

app/Livewire/UploadAvatar.php

<?php

namespace App\Livewire;

use Illuminate\Support\Facades\Storage;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;

class UploadAvatar extends Component
{
    use WithFileUploads;

    #[Validate('nullable|image|max:2048')] // 2MB max
    public $photo;

    public string $currentAvatar = '';

    public function mount(): void
    {
        $this->currentAvatar = auth()->user()->avatar_url ?? '';
    }

    /**
     * Save avatar.
     */
    public function save(): void
    {
        $this->validate();

        if (!$this->photo) {
            return;
        }

        // Delete old avatar
        if (auth()->user()->avatar) {
            Storage::disk('public')->delete(auth()->user()->avatar);
        }

        // Store new avatar
        $path = $this->photo->store('avatars', 'public');

        auth()->user()->update(['avatar' => $path]);

        $this->currentAvatar = Storage::disk('public')->url($path);
        $this->reset('photo');

        session()->flash('message', 'Avatar updated successfully!');
    }

    /**
     * Remove current avatar.
     */
    public function removeAvatar(): void
    {
        if (auth()->user()->avatar) {
            Storage::disk('public')->delete(auth()->user()->avatar);
            auth()->user()->update(['avatar' => null]);
            $this->currentAvatar = '';

            session()->flash('message', 'Avatar removed.');
        }
    }

    /**
     * Cancel upload.
     */
    public function cancelUpload(): void
    {
        $this->reset('photo');
    }

    public function render()
    {
        return view('livewire.upload-avatar');
    }
}

resources/views/livewire/upload-avatar.blade.php

<div class="max-w-md">
    @if (session()->has('message'))
        <div class="bg-green-100 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('message') }}
        </div>
    @endif

    <div class="flex items-start gap-6">
        {{-- Current Avatar --}}
        <div class="flex-shrink-0">
            @if ($photo)
                <img
                    src="{{ $photo->temporaryUrl() }}"
                    alt="Preview"
                    class="w-24 h-24 rounded-full object-cover border-4 border-blue-500"
                >
            @elseif ($currentAvatar)
                <img
                    src="{{ $currentAvatar }}"
                    alt="Current avatar"
                    class="w-24 h-24 rounded-full object-cover"
                >
            @else
                <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center">
                    <span class="text-gray-400 text-2xl">?</span>
                </div>
            @endif
        </div>

        {{-- Upload Form --}}
        <div class="flex-1">
            <form wire:submit="save" class="space-y-4">
                {{-- File Input --}}
                <div>
                    <label class="block text-sm font-medium mb-2">
                        Choose new avatar
                    </label>
                    <input
                        type="file"
                        wire:model="photo"
                        accept="image/*"
                        class="block w-full text-sm text-gray-500
                               file:mr-4 file:py-2 file:px-4
                               file:rounded file:border-0
                               file:text-sm file:font-semibold
                               file:bg-blue-50 file:text-blue-700
                               hover:file:bg-blue-100"
                    >
                    @error('photo')
                        <span class="text-red-500 text-sm">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Upload Progress --}}
                <div wire:loading wire:target="photo" class="w-full">
                    <div class="bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full animate-pulse w-1/2"></div>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">Uploading...</p>
                </div>

                {{-- Actions --}}
                <div class="flex gap-2">
                    @if ($photo)
                        <button
                            type="submit"
                            class="bg-blue-500 text-white px-4 py-2 rounded text-sm"
                            wire:loading.attr="disabled"
                            wire:target="save"
                        >
                            <span wire:loading.remove wire:target="save">Save Avatar</span>
                            <span wire:loading wire:target="save">Saving...</span>
                        </button>
                        <button
                            type="button"
                            wire:click="cancelUpload"
                            class="bg-gray-200 text-gray-700 px-4 py-2 rounded text-sm"
                        >
                            Cancel
                        </button>
                    @endif

                    @if ($currentAvatar && !$photo)
                        <button
                            type="button"
                            wire:click="removeAvatar"
                            wire:confirm="Remove your avatar?"
                            class="bg-red-500 text-white px-4 py-2 rounded text-sm"
                        >
                            Remove Avatar
                        </button>
                    @endif
                </div>
            </form>

            <p class="text-xs text-gray-500 mt-4">
                Max file size: 2MB. Formats: JPG, PNG, GIF
            </p>
        </div>
    </div>
</div>

Multiple File Upload

<?php // app/Livewire/UploadGallery.php

namespace App\Livewire;

use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;

class UploadGallery extends Component
{
    use WithFileUploads;

    #[Validate(['photos.*' => 'image|max:2048'])]
    public array $photos = [];

    public array $uploaded = [];

    public function updatedPhotos(): void
    {
        $this->validate();
    }

    public function removePhoto(int $index): void
    {
        array_splice($this->photos, $index, 1);
    }

    public function save(): void
    {
        foreach ($this->photos as $photo) {
            $path = $photo->store('gallery', 'public');
            $this->uploaded[] = $path;
        }

        $this->reset('photos');
        session()->flash('message', count($this->uploaded) . ' photos uploaded!');
    }

    public function render()
    {
        return view('livewire.upload-gallery');
    }
}

{{-- resources/views/livewire/upload-gallery.blade.php --}}
<div>
    <input type="file" wire:model="photos" multiple accept="image/*">

    {{-- Previews --}}
    <div class="grid grid-cols-4 gap-4 mt-4">
        @foreach ($photos as $index => $photo)
            <div wire:key="photo-{{ $index }}" class="relative">
                <img src="{{ $photo->temporaryUrl() }}" class="w-full h-24 object-cover rounded">
                <button
                    wire:click="removePhoto({{ $index }})"
                    class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6"
                >
                    ×
                </button>
            </div>
        @endforeach
    </div>

    @if (count($photos) > 0)
        <button wire:click="save" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">
            Upload {{ count($photos) }} Photos
        </button>
    @endif
</div>

Form Component with Form Object

app/Livewire/Forms/PostForm.php

<?php

namespace App\Livewire\Forms;

use App\Models\Post;
use Livewire\Attributes\Validate;
use Livewire\Form;

class PostForm extends Form
{
    public ?Post $post = null;

    #[Validate('required|min:5|max:255')]
    public string $title = '';

    #[Validate('required|min:10')]
    public string $content = '';

    #[Validate('nullable|exists:categories,id')]
    public ?int $category_id = null;

    #[Validate('nullable|array')]
    public array $tags = [];

    #[Validate('boolean')]
    public bool $published = false;

    /**
     * Set form from existing post.
     */
    public function setPost(Post $post): void
    {
        $this->post = $post;
        $this->fill($post->only([
            'title',
            'content',
            'category_id',
            'tags',
        ]));
        $this->published = $post->published_at !== null;
    }

    /**
     * Create new post.
     */
    public function store(): Post
    {
        $validated = $this->validate();

        return auth()->user()->posts()->create([
            ...$validated,
            'published_at' => $this->published ? now() : null,
        ]);
    }

    /**
     * Update existing post.
     */
    public function update(): Post
    {
        $validated = $this->validate();

        $this->post->update([
            ...$validated,
            'published_at' => $this->published ? now() : null,
        ]);

        return $this->post->fresh();
    }

    /**
     * Hook: Transform title on update.
     */
    public function updatedTitle(string $value): void
    {
        $this->title = ucwords(strtolower($value));
    }
}

app/Livewire/EditPost.php

<?php

namespace App\Livewire;

use App\Livewire\Forms\PostForm;
use App\Models\Category;
use App\Models\Post;
use Livewire\Attributes\Computed;
use Livewire\Component;

class EditPost extends Component
{
    public PostForm $form;

    /**
     * Initialize with post.
     */
    public function mount(Post $post): void
    {
        $this->authorize('update', $post);
        $this->form->setPost($post);
    }

    /**
     * Available categories.
     */
    #[Computed]
    public function categories()
    {
        return Category::orderBy('name')->get();
    }

    /**
     * Save changes.
     */
    public function save(): void
    {
        $this->authorize('update', $this->form->post);

        $post = $this->form->update();

        session()->flash('message', 'Post updated successfully!');

        $this->redirect(route('posts.show', $post));
    }

    /**
     * Delete post.
     */
    public function delete(): void
    {
        $this->authorize('delete', $this->form->post);

        $this->form->post->delete();

        session()->flash('message', 'Post deleted.');

        $this->redirect(route('posts.index'));
    }

    public function render()
    {
        return view('livewire.edit-post');
    }
}

resources/views/livewire/edit-post.blade.php

<div class="max-w-2xl mx-auto p-6">
    <h1 class="text-2xl font-bold mb-6">Edit Post</h1>

    @if (session()->has('message'))
        <div class="bg-green-100 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('message') }}
        </div>
    @endif

    <form wire:submit="save" class="space-y-4">
        {{-- Title with real-time validation --}}
        <div>
            <label for="title" class="block text-sm font-medium">Title</label>
            <input
                type="text"
                id="title"
                wire:model.blur="form.title"
                class="mt-1 block w-full rounded-md border-gray-300"
            >
            @error('form.title')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        {{-- Content --}}
        <div>
            <label for="content" class="block text-sm font-medium">Content</label>
            <textarea
                id="content"
                wire:model.blur="form.content"
                rows="8"
                class="mt-1 block w-full rounded-md border-gray-300"
            ></textarea>
            @error('form.content')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        {{-- Category --}}
        <div>
            <label for="category" class="block text-sm font-medium">Category</label>
            <select
                id="category"
                wire:model="form.category_id"
                class="mt-1 block w-full rounded-md border-gray-300"
            >
                <option value="">Select category...</option>
                @foreach ($this->categories as $category)
                    <option value="{{ $category->id }}">
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
            @error('form.category_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        {{-- Published --}}
        <div class="flex items-center">
            <input
                type="checkbox"
                id="published"
                wire:model="form.published"
                class="rounded border-gray-300"
            >
            <label for="published" class="ml-2 text-sm">Published</label>
        </div>

        {{-- Actions --}}
        <div class="flex justify-between">
            <div class="flex gap-4">
                <button
                    type="submit"
                    class="bg-blue-500 text-white px-4 py-2 rounded"
                    wire:loading.attr="disabled"
                >
                    <span wire:loading.remove wire:target="save">Save Changes</span>
                    <span wire:loading wire:target="save">Saving...</span>
                </button>

                <a
                    href="{{ route('posts.index') }}"
                    class="bg-gray-200 px-4 py-2 rounded"
                >
                    Cancel
                </a>
            </div>

            <button
                type="button"
                wire:click="delete"
                wire:confirm="Are you sure you want to delete this post?"
                class="bg-red-500 text-white px-4 py-2 rounded"
            >
                Delete
            </button>
        </div>
    </form>
</div>

routes/web.php

use App\Livewire\EditPost;

Route::livewire('/posts/{post}/edit', EditPost::class)
    ->middleware(['auth'])
    ->name('posts.edit');

Nested Components

Parent Component - TodoList

<?php // app/Livewire/TodoList.php

namespace App\Livewire;

use App\Models\Todo;
use Illuminate\Support\Collection;
use Livewire\Attributes\Computed;
use Livewire\Attributes\On;
use Livewire\Component;

class TodoList extends Component
{
    public string $newTodo = '';

    /**
     * Get todos.
     */
    #[Computed]
    public function todos(): Collection
    {
        return Todo::where('user_id', auth()->id())
            ->orderBy('completed')
            ->orderByDesc('created_at')
            ->get();
    }

    /**
     * Add new todo.
     */
    public function addTodo(): void
    {
        $this->validate(['newTodo' => 'required|min:3']);

        Todo::create([
            'user_id' => auth()->id(),
            'title' => $this->newTodo,
            'completed' => false,
        ]);

        $this->reset('newTodo');
        unset($this->todos); // Clear computed cache
    }

    /**
     * Listen for todo completion from child.
     */
    #[On('todo-completed')]
    public function handleTodoCompleted(int $todoId): void
    {
        unset($this->todos); // Refresh list
    }

    /**
     * Listen for todo deletion from child.
     */
    #[On('todo-deleted')]
    public function handleTodoDeleted(int $todoId): void
    {
        unset($this->todos); // Refresh list
    }

    public function render()
    {
        return view('livewire.todo-list');
    }
}

Child Component - TodoItem

<?php // app/Livewire/TodoItem.php

namespace App\Livewire;

use App\Models\Todo;
use Livewire\Attributes\Locked;
use Livewire\Attributes\Modelable;
use Livewire\Component;

class TodoItem extends Component
{
    public Todo $todo;

    public bool $editing = false;

    public string $editTitle = '';

    /**
     * Initialize from parent prop.
     */
    public function mount(Todo $todo): void
    {
        $this->todo = $todo;
        $this->editTitle = $todo->title;
    }

    /**
     * Toggle completion.
     */
    public function toggleComplete(): void
    {
        $this->todo->update(['completed' => !$this->todo->completed]);

        $this->dispatch('todo-completed', todoId: $this->todo->id);
    }

    /**
     * Start editing.
     */
    public function startEditing(): void
    {
        $this->editing = true;
        $this->editTitle = $this->todo->title;
    }

    /**
     * Save edit.
     */
    public function saveEdit(): void
    {
        $this->validate(['editTitle' => 'required|min:3']);

        $this->todo->update(['title' => $this->editTitle]);
        $this->editing = false;
    }

    /**
     * Cancel edit.
     */
    public function cancelEdit(): void
    {
        $this->editing = false;
        $this->editTitle = $this->todo->title;
    }

    /**
     * Delete todo.
     */
    public function delete(): void
    {
        $this->todo->delete();

        $this->dispatch('todo-deleted', todoId: $this->todo->id);
    }

    public function render()
    {
        return view('livewire.todo-item');
    }
}

Parent View - todo-list.blade.php

<div class="max-w-md mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Todo List</h1>

    {{-- Add Todo Form --}}
    <form wire:submit="addTodo" class="flex gap-2 mb-6">
        <input
            type="text"
            wire:model="newTodo"
            placeholder="Add a new todo..."
            class="flex-1 rounded border-gray-300"
        >
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
            Add
        </button>
    </form>
    @error('newTodo')
        <span class="text-red-500 text-sm">{{ $message }}</span>
    @enderror

    {{-- Todo Items --}}
    <div class="space-y-2">
        @foreach ($this->todos as $todo)
            <livewire:todo-item
                :todo="$todo"
                :wire:key="'todo-'.$todo->id"
            />
        @endforeach
    </div>

    {{-- Empty State --}}
    @if ($this->todos->isEmpty())
        <p class="text-gray-500 text-center py-8">
            No todos yet. Add one above!
        </p>
    @endif
</div>

Child View - todo-item.blade.php

<div @class([
    'flex items-center gap-3 p-3 bg-white rounded shadow',
    'opacity-50' => $todo->completed,
])>
    {{-- Checkbox --}}
    <input
        type="checkbox"
        wire:click="toggleComplete"
        @checked($todo->completed)
        class="rounded border-gray-300"
    >

    {{-- Title or Edit Form --}}
    @if ($editing)
        <form wire:submit="saveEdit" class="flex-1 flex gap-2">
            <input
                type="text"
                wire:model="editTitle"
                class="flex-1 rounded border-gray-300 text-sm"
                autofocus
            >
            <button type="submit" class="text-green-600 text-sm">Save</button>
            <button type="button" wire:click="cancelEdit" class="text-gray-600 text-sm">
                Cancel
            </button>
        </form>
    @else
        <span
            @class(['flex-1', 'line-through' => $todo->completed])
            wire:dblclick="startEditing"
        >
            {{ $todo->title }}
        </span>
    @endif

    {{-- Actions --}}
    @unless ($editing)
        <button
            wire:click="startEditing"
            class="text-blue-600 text-sm hover:underline"
        >
            Edit
        </button>
        <button
            wire:click="delete"
            wire:confirm="Delete this todo?"
            class="text-red-600 text-sm hover:underline"
        >
            Delete
        </button>
    @endunless
</div>

Using $parent

{{-- Child can call parent methods directly --}}
<button wire:click="$parent.refreshList">
    Refresh
</button>

{{-- Access parent property --}}
<span>Filter: {{ $parent.filter }}</span>

#[Reactive] Props

<?php // Child with reactive props - auto-updates when parent changes
use Livewire\Attributes\Reactive;

class TodoCount extends Component
{
    #[Reactive]
    public array $todos;

    public function render()
    {
        return view('livewire.todo-count', [
            'count' => count($this->todos),
            'completed' => collect($this->todos)->where('completed', true)->count(),
        ]);
    }
}

{{-- In parent --}}
<livewire:todo-count :todos="$this->todos->toArray()" />

#[Modelable] Two-Way Binding

<?php // Child input component
use Livewire\Attributes\Modelable;

class TextInput extends Component
{
    #[Modelable]
    public string $value = '';

    public string $label = '';
    public string $placeholder = '';
}

{{-- Parent can wire:model directly to child --}}
<livewire:text-input
    wire:model="title"
    label="Title"
    placeholder="Enter title..."
/>

Volt Components

Functional API - Counter

<?php // resources/views/livewire/counter.blade.php
use function Livewire\Volt\{state, computed, mount};

state(['count' => 0, 'step' => 1]);

$increment = fn() => $this->count += $this->step;
$decrement = fn() => $this->count -= $this->step;
$reset = fn() => $this->count = 0;

$doubleCount = computed(fn() => $this->count * 2);

$mount = function() {
    $this->count = session('count', 0);
};

$updated = function($property) {
    if ($property === 'count') {
        session(['count' => $this->count]);
    }
};
?>

<div class="p-4 bg-white rounded shadow">
    <h2 class="text-xl font-bold">Counter</h2>

    <p class="text-3xl my-4">{{ $count }}</p>
    <p class="text-gray-500">Double: {{ $this->doubleCount }}</p>

    <div class="flex gap-2 mt-4">
        <button wire:click="decrement" class="bg-red-500 text-white px-4 py-2 rounded">
            -{{ $step }}
        </button>
        <button wire:click="increment" class="bg-green-500 text-white px-4 py-2 rounded">
            +{{ $step }}
        </button>
        <button wire:click="reset" class="bg-gray-500 text-white px-4 py-2 rounded">
            Reset
        </button>
    </div>

    <div class="mt-4">
        <label class="text-sm">Step:</label>
        <input type="number" wire:model.live="step" class="w-20 border rounded px-2 py-1" min="1">
    </div>
</div>

Class-Based Volt - User Profile

<?php // resources/views/livewire/user-profile.blade.php
use App\Models\User;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Validate;
use Livewire\Volt\Component;

new class extends Component {
    public User $user;

    #[Validate('required|min:2|max:100')]
    public string $name = '';

    #[Validate('required|email')]
    public string $email = '';

    #[Validate('nullable|url')]
    public ?string $website = null;

    public function mount(User $user): void
    {
        $this->user = $user;
        $this->fill($user->only(['name', 'email', 'website']));
    }

    #[Computed]
    public function postsCount(): int
    {
        return $this->user->posts()->count();
    }

    public function save(): void
    {
        $validated = $this->validate();

        $this->user->update($validated);

        session()->flash('message', 'Profile updated!');
    }

    public function with(): array
    {
        return [
            'recentPosts' => $this->user->posts()->latest()->take(5)->get(),
        ];
    }
};
?>

<div class="max-w-lg mx-auto p-6">
    <h1 class="text-2xl font-bold mb-6">Edit Profile</h1>

    @if (session()->has('message'))
        <div class="bg-green-100 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('message') }}
        </div>
    @endif

    <form wire:submit="save" class="space-y-4">
        <div>
            <label class="block text-sm font-medium">Name</label>
            <input type="text" wire:model.blur="name" class="mt-1 block w-full rounded border-gray-300">
            @error('name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <div>
            <label class="block text-sm font-medium">Email</label>
            <input type="email" wire:model.blur="email" class="mt-1 block w-full rounded border-gray-300">
            @error('email') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <div>
            <label class="block text-sm font-medium">Website</label>
            <input type="url" wire:model.blur="website" class="mt-1 block w-full rounded border-gray-300">
            @error('website') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
            Save Profile
        </button>
    </form>

    <div class="mt-8">
        <h2 class="text-lg font-semibold">Recent Posts ({{ $this->postsCount }})</h2>
        <ul class="mt-2 space-y-2">
            @foreach ($recentPosts as $post)
                <li wire:key="post-{{ $post->id }}" class="border-b pb-2">
                    <a href="{{ route('posts.show', $post) }}" class="text-blue-600 hover:underline">
                        {{ $post->title }}
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</div>

@volt Inline Directive

{{-- resources/views/dashboard.blade.php --}}
<x-layouts.app>
    <h1 class="text-2xl font-bold mb-6">Dashboard</h1>

    <div class="grid grid-cols-3 gap-4">
        @volt('dashboard.users-count')
            <?php
            use function Livewire\Volt\{state};
            use App\Models\User;

            state(['count' => fn() => User::count()]);
            ?>

            <div class="bg-white p-4 rounded shadow">
                <h3 class="text-gray-500">Total Users</h3>
                <p class="text-3xl font-bold">{{ $count }}</p>
            </div>
        @endvolt

        @volt('dashboard.posts-count')
            <?php
            use App\Models\Post;
            state(['count' => fn() => Post::published()->count()]);
            ?>

            <div class="bg-white p-4 rounded shadow">
                <h3 class="text-gray-500">Published Posts</h3>
                <p class="text-3xl font-bold">{{ $count }}</p>
            </div>
        @endvolt

        @volt('dashboard.revenue')
            <?php
            use App\Models\Order;
            state(['amount' => fn() => Order::sum('total')]);
            ?>

            <div class="bg-white p-4 rounded shadow">
                <h3 class="text-gray-500">Total Revenue</h3>
                <p class="text-3xl font-bold">${{ number_format($amount, 2) }}</p>
            </div>
        @endvolt
    </div>
</x-layouts.app>

Volt Routes

// routes/web.php
use Livewire\Volt\Volt;

Volt::route('/', 'home');
Volt::route('/counter', 'counter');
Volt::route('/users/{user}', 'user-profile')
    ->middleware(['auth'])
    ->name('profile');

Testing

Decision Tree

Component type?
├── Class component → Livewire::test(Component::class)
├── Volt component → Volt::test('component-name')
├── Full-page → $this->get('/path')->assertSeeLivewire()
├── Events → assertDispatched()
└── File uploads → UploadedFile::fake()

Livewire::test()

Volt::test()

Property Assertions

Validation Assertions

Event Assertions

View Assertions

Navigation Assertions

File Upload Testing

HTTP Testing

Best Practices

→ See template: ComponentTest.php.md

Volt Components

Decision Tree

Volt style?
├── Functional API → state(), computed(), $action
├── Class-based → new class extends Component
├── Inline in page → @volt directive
├── Route → Volt::route()
└── Mixed → PHP + Blade in one file

Functional API

State Definition

Class-Based Volt

@volt Directive

Volt Routes

Accessing $this

Computed in Functional

With Dependencies

Best Practices

→ See template: VoltComponent.blade.md

Wire Directives

Decision Tree

What to bind?
├── Input value → wire:model
├── Click action → wire:click
├── Form submit → wire:submit
├── Loading state → wire:loading
├── Keyboard → wire:keydown
├── Unique ID → wire:key
└── Ignore updates → wire:ignore

wire:model Modifiers

Event Directives

Event Modifiers

wire:loading

wire:key

wire:ignore

wire:poll

wire:navigate

Best Practices

→ See template: FormComponent.php.md