Livewire 3 reactive components - wire:model, actions, events, Volt, Folio. Use when building reactive UI without JavaScript.
View on GitHubFebruary 2, 2026
Select agents to install to:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/laravel-expert/skills/laravel-livewire/SKILL.md -a claude-code --skill laravel-livewireInstallation paths:
.claude/skills/laravel-livewire/# Laravel Livewire ## Agent Workflow (MANDATORY) Before ANY implementation, launch in parallel: 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 | 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 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) | Topic | Reference | When to Consult | |-------|-----------|-----------------| | **Components** | [components.md](references/components.md) | Creating components | | **Wire Directives** | [wire-directives.md](references/wire-directives.md) | Data binding, events | | **Lifecycle** | [lifecycle.md](references/lifecycle.md) | Hooks, mount, hydrate | | **Forms** | [forms-validation.md](references/forms-validation.md) | Validation, f