---
name: livewire-development
description: Expert guide for Livewire 4.x / Volt development. Use for creating Single-File Components (SFCs) with the ⚡ prefix, routing with Route::livewire(), and implementing reactive patterns with anonymous classes and attributes.
---

# Livewire 4.x Development

This skill provides specialized workflows and code patterns for building reactive web applications using Livewire 4.x and the integrated Volt engine.

## Core Development Standards

1. **Naming**: Use the `⚡` prefix for SFC filenames (e.g., `⚡login.blade.php`).
2. **Directory**: Full-page components go in `resources/views/pages/`.
3. **Logic**: Use **Anonymous Classes** extending `Livewire\Component` within the Blade file.
4. **Layouts**: Use the `#[Layout]` attribute above the class definition.
5. **Routing**: Register via `Route::livewire()` in `web.php`.

## Quick Start Template

```php
<?php
use Livewire\Component;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;

#[Layout('layouts.auth')]
new class extends Component {
    #[Validate('required')]
    public string $title = '';

    public function save() {
        $this->validate();
        // Database logic
        return $this->redirect('/dashboard', navigate: true);
    }

    public function with() {
        return [
            'data' => '...',
        ];
    }
};
?>

<div>
    <form wire:submit="save">
        <input type="text" wire:model="title">
        <button type="submit">Submit</button>
    </form>
</div>
```

## Key APIs & Syntaxes

### 1. Attribute-based Control
Use PHP attributes for declarative behavior:
- `#[Locked]`: Property cannot be updated from the client.
- `#[Url]`: Keep property in sync with URL query string.
- `#[On('event')]`: Handle global events.

### 2. Full-Page Routing
Register routes using the `pages::` namespace:
```php
Route::livewire('/login', 'pages::admin.login');
```

### 3. SPA Navigation
Always use `wire:navigate` on links and `navigate: true` in redirects to ensure fast, partial-page updates.

## Resources
- **Syntax Cheatsheet**: [references/cheatsheet.md](references/cheatsheet.md) - Common patterns, hooks, and attributes.
- **Advanced Workflows**: [references/workflows.md](references/workflows.md) - Form objects, URL syncing, and events.