|
| 1 | +- This project uses Livewire Volt for interactivity within its pages. New pages requiring interactivity must also use Livewire Volt. There is documentation available for it. |
| 2 | +- Volt is an elegantly crafted **functional** API for Livewire that supports single-file components, allowing a component's PHP logic and Blade templates to coexist in the same file |
| 3 | +- **Single-File Components**: Livewire Volt allows PHP logic and Blade templates in one file. Components use the `@volt` directive. |
| 4 | +- You must check existing Volt components to find out if they're functional or class based. If you can't detect that, ask the user which they prefer before writing a Volt component. |
| 5 | + |
| 6 | + |
| 7 | +#### Volt Functional Component Example |
| 8 | +@verbatim |
| 9 | +<code-snippet name="Volt Functional Component Example" lang="php"> |
| 10 | +@volt |
| 11 | +<?php |
| 12 | +use function Livewire\Volt\{state, computed}; |
| 13 | +
|
| 14 | +state(['count' => 0]); |
| 15 | +
|
| 16 | +$increment = fn () => $this->count++; |
| 17 | +$decrement = fn () => $this->count--; |
| 18 | +
|
| 19 | +$double = computed(fn () => $this->count * 2); |
| 20 | +?> |
| 21 | + |
| 22 | +<div> |
| 23 | + <h1>Count: {{ $count }}</h1> |
| 24 | + <h2>Double: {{ $this->double }}</h2> |
| 25 | + <button wire:click="increment">+</button> |
| 26 | + <button wire:click="decrement">-</button> |
| 27 | +</div> |
| 28 | +@endvolt |
| 29 | +</code-snippet> |
| 30 | +@endverbatim |
| 31 | + |
| 32 | +### Volt Class based Component Example |
| 33 | +To get started, define an anonymous class that extends Livewire\Volt\Component. Within the class, you may utilize all of the features of Livewire using traditional Livewire syntax: |
| 34 | + |
| 35 | +@verbatim |
| 36 | +<code-snippet name="Volt Class-based Volt Component Example" lang="php"> |
| 37 | +use Livewire\Volt\Component; |
| 38 | + |
| 39 | +new class extends Component { |
| 40 | + public $count = 0; |
| 41 | + |
| 42 | + public function increment() |
| 43 | + { |
| 44 | + $this->count++; |
| 45 | + } |
| 46 | +} ?> |
| 47 | + |
| 48 | +<div> |
| 49 | + <h1>{{ $count }}</h1> |
| 50 | + <button wire:click="increment">+</button> |
| 51 | +</div> |
| 52 | +</code-snippet> |
| 53 | +@endverbatim |
| 54 | + |
| 55 | +#### Testing Volt & Volt Components |
| 56 | +- Use the existing location if tests already exist, otherwise fallback to `tests/Feature/Volt` |
| 57 | + |
| 58 | +<code-snippet name="Livewire Test Example" lang="php"> |
| 59 | +use Livewire\Volt\Volt; |
| 60 | + |
| 61 | +test('counter increments', function () { |
| 62 | + Volt::test('counter') |
| 63 | + ->assertSee('Count: 0') |
| 64 | + ->call('increment') |
| 65 | + ->assertSee('Count: 1'); |
| 66 | +}); |
| 67 | +</code-snippet> |
| 68 | + |
| 69 | +@verbatim |
| 70 | +<code-snippet name="Volt component test using Pest" lang="php"> |
| 71 | +declare(strict_types=1); |
| 72 | + |
| 73 | +use App\Models\{User, Product}; |
| 74 | +use Livewire\Volt\Volt; |
| 75 | + |
| 76 | +test('product form creates product', function () { |
| 77 | + $user = User::factory()->create(); |
| 78 | + |
| 79 | + Volt::test('pages.products.create') |
| 80 | + ->actingAs($user) |
| 81 | + ->set('form.name', 'Test Product') |
| 82 | + ->set('form.description', 'Test Description') |
| 83 | + ->set('form.price', 99.99) |
| 84 | + ->call('create') |
| 85 | + ->assertHasNoErrors(); |
| 86 | + |
| 87 | + expect(Product::where('name', 'Test Product')->exists())->toBeTrue(); |
| 88 | +}); |
| 89 | +</code-snippet> |
| 90 | +@endverbatim |
| 91 | + |
| 92 | +### Common Patterns |
| 93 | + |
| 94 | +@verbatim |
| 95 | +<code-snippet name="CRUD with Volt" lang="php"> |
| 96 | +@volt |
| 97 | +use App\Models\Product; |
| 98 | +use function Livewire\Volt\{state, computed}; |
| 99 | + |
| 100 | +state(['editing' => null, 'search' => '']); |
| 101 | + |
| 102 | +$products = computed(fn() => Product::when($this->search, |
| 103 | + fn($q) => $q->where('name', 'like', "%{$this->search}%") |
| 104 | +)->get()); |
| 105 | + |
| 106 | +$edit = fn(Product $product) => $this->editing = $product->id; |
| 107 | +$delete = fn(Product $product) => $product->delete(); |
| 108 | +?> |
| 109 | + |
| 110 | + <!-- UI here --> |
| 111 | +@endvolt |
| 112 | +</code-snippet> |
| 113 | +@endverbatim |
| 114 | + |
| 115 | +@verbatim |
| 116 | +<code-snippet name="Real-time search with Volt" lang="php"> |
| 117 | + <flux:input |
| 118 | + wire:model.live.debounce.300ms="search" |
| 119 | + placeholder="Search..." |
| 120 | + /> |
| 121 | +</code-snippet> |
| 122 | +@endverbatim |
| 123 | + |
| 124 | + |
| 125 | +@verbatim |
| 126 | +<code-snippet name="Loading states with Volt" lang="php"> |
| 127 | + <flux:button wire:click="save" wire:loading.attr="disabled"> |
| 128 | + <span wire:loading.remove>Save</span> |
| 129 | + <span wire:loading>Saving...</span> |
| 130 | + </flux:button> |
| 131 | +</code-snippet> |
| 132 | +@endverbatim |
0 commit comments