volt-development

# Volt Development ## When to Apply Activate this skill when: - Creating Volt single-file components - Converting traditional Livewire components to Volt - Testing Volt components ## Documentation Use `search-docs` for detailed Volt patterns and documentation. ## Basic Usage Create components with `php artisan make:volt [name] [--test] [--pest]`. Important: Check existing Volt components to determine if they use functional or class-based style before creating new ones. ### Functional Components <!-- Volt Functional Component --> ```php @@volt <?php use function Livewire\Volt\{state, computed}; state(['count' => 0]); $increment = fn () => $this->count++; $double = computed(fn () => $this->count * 2); ?> <div> <h1>Count: @{{ $count }} (Double: @{{ $this->double }})</h1> <button wire:click="increment">+</button> </div> @@endvolt ``` ### Class-Based Components <!-- Volt Class-based Component --> ```php use Livewire\Volt\Component; new class extends Component { public int $count = 0; public function increment(): void { $this->count++; } } ?> <div> <h1>@{{ $count }}</h1> <button wire:click="increment">+</button> </div> ``` ## Testing Tests go in existing Volt test directory or `tests/Feature/Volt`: <!-- Volt Test Example --> ```php use Livewire\Volt\Volt; test('counter increments', function () { Volt::test('counter') ->assertSee('Count: 0') ->call('increment') ->assertSee('Count: 1'); }); ``` ## Verification 1. Check existing components for functional vs class-based style 2. Test component with `Volt::test()` ## Common Pitfalls - Not checking existing style (functional vs class-based) before creating - Forgetting `@volt` directive wrapper - Missing `--test` or `--pest` flag when tests are needed