majiayu000 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