Laravel Livewire

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

• fuse-ai-pilot:explore-codebase - Check existing Livewire components

• fuse-ai-pilot:research-expert - Verify Livewire 3 patterns via Context7

• mcp__context7__query-docs - Check specific Livewire features

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

Overview

Feature Description

Components Reactive PHP classes with Blade views

wire:model Two-way data binding

Actions Call PHP methods from frontend

Events Component communication

Volt Single-file components

Folio File-based routing

Critical Rules

• Always use wire:key in loops

• Use wire:model.blur for validation, not .live everywhere

• Debounce search inputs with .debounce.300ms

• #[Locked] for sensitive IDs

• authorize() in destructive actions

• 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)

Topic Reference When to Consult

Components components.md Creating components

Wire Directives wire-directives.md Data binding, events

Lifecycle lifecycle.md Hooks, mount, hydrate

Forms forms-validation.md Validation, form objects

Events events.md Dispatch, listen

Alpine alpine-integration.md $wire, @entangle

File Uploads file-uploads.md Upload handling

Nesting nesting.md Parent-child

Loading loading-states.md wire:loading, lazy

Navigation navigation.md SPA mode

Testing testing.md Component tests

Security security.md Auth, rate limit

Volt volt.md Single-file components

Advanced Features

Topic Reference When to Consult

Folio folio.md File-based routing

Precognition precognition.md Live validation

Reverb reverb.md WebSockets

Templates (Complete Code)

Template When to Use

BasicComponent.php.md Standard component

FormComponent.php.md Form with validation

VoltComponent.blade.md Volt patterns

DataTableComponent.php.md Table with search/sort

FileUploadComponent.php.md File uploads

NestedComponents.php.md Parent-child

ComponentTest.php.md Testing patterns

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