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