|
| 1 | +--- |
| 2 | +name: volt-development |
| 3 | +description: "Develops single-file Livewire components with Volt. Activates when creating Volt components, converting Livewire to Volt, working with @volt directive, functional or class-based Volt APIs; or when the user mentions Volt, single-file components, functional Livewire, or inline component logic in Blade files." |
| 4 | +license: MIT |
| 5 | +metadata: |
| 6 | + author: laravel |
| 7 | +--- |
| 8 | +@php |
| 9 | +/** @var \Laravel\Boost\Install\GuidelineAssist $assist */ |
| 10 | +@endphp |
| 11 | +# Volt Development |
| 12 | + |
| 13 | +## When to Apply |
| 14 | + |
| 15 | +Activate this skill when: |
| 16 | + |
| 17 | +- Creating Volt single-file components |
| 18 | +- Converting traditional Livewire components to Volt |
| 19 | +- Testing Volt components |
| 20 | + |
| 21 | +## Documentation |
| 22 | + |
| 23 | +Use `search-docs` for detailed Volt patterns and documentation. |
| 24 | + |
| 25 | +## Basic Usage |
| 26 | + |
| 27 | +Create components with `{{ $assist->artisanCommand('make:volt [name] [--test] [--pest]') }}`. |
| 28 | + |
| 29 | +Important: Check existing Volt components to determine if they use functional or class-based style before creating new ones. |
| 30 | + |
| 31 | +### Functional Components |
| 32 | + |
| 33 | +@boostsnippet("Volt Functional Component", "php") |
| 34 | +@@volt |
| 35 | +<?php |
| 36 | +use function Livewire\Volt\{state, computed}; |
| 37 | +
|
| 38 | +state(['count' => 0]); |
| 39 | +
|
| 40 | +$increment = fn () => $this->count++; |
| 41 | +$double = computed(fn () => $this->count * 2); |
| 42 | +?> |
| 43 | + |
| 44 | +<div> |
| 45 | + <h1>Count: @{{ $count }} (Double: @{{ $this->double }})</h1> |
| 46 | + <button wire:click="increment">+</button> |
| 47 | +</div> |
| 48 | +@@endvolt |
| 49 | +@endboostsnippet |
| 50 | + |
| 51 | +### Class-Based Components |
| 52 | + |
| 53 | +@boostsnippet("Volt Class-based Component", "php") |
| 54 | +use Livewire\Volt\Component; |
| 55 | + |
| 56 | +new class extends Component { |
| 57 | + public int $count = 0; |
| 58 | + |
| 59 | + public function increment(): void |
| 60 | + { |
| 61 | + $this->count++; |
| 62 | + } |
| 63 | +} ?> |
| 64 | + |
| 65 | +<div> |
| 66 | + <h1>@{{ $count }}</h1> |
| 67 | + <button wire:click="increment">+</button> |
| 68 | +</div> |
| 69 | +@endboostsnippet |
| 70 | + |
| 71 | +## Testing |
| 72 | + |
| 73 | +Tests go in existing Volt test directory or `tests/Feature/Volt`: |
| 74 | + |
| 75 | +@boostsnippet("Volt Test Example", "php") |
| 76 | +use Livewire\Volt\Volt; |
| 77 | + |
| 78 | +test('counter increments', function () { |
| 79 | + Volt::test('counter') |
| 80 | + ->assertSee('Count: 0') |
| 81 | + ->call('increment') |
| 82 | + ->assertSee('Count: 1'); |
| 83 | +}); |
| 84 | +@endboostsnippet |
| 85 | + |
| 86 | +## Verification |
| 87 | + |
| 88 | +1. Check existing components for functional vs class-based style |
| 89 | +2. Test component with `Volt::test()` |
| 90 | + |
| 91 | +## Common Pitfalls |
| 92 | + |
| 93 | +- Not checking existing style (functional vs class-based) before creating |
| 94 | +- Forgetting `@volt` directive wrapper |
| 95 | +- Missing `--test` or `--pest` flag when tests are needed |
0 commit comments