Skip to content

Commit 40e5655

Browse files
authored
Add Boost Guidelines & Skills (#151)
1 parent 583fca5 commit 40e5655

File tree

2 files changed

+101
-0
lines changed

2 files changed

+101
-0
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Livewire Volt
2+
3+
- Single-file Livewire components: PHP logic and Blade templates in one file.
4+
- Always check existing Volt components to determine functional vs class-based style.
5+
- IMPORTANT: Always use `search-docs` tool for version-specific Volt documentation and updated code examples.
6+
- IMPORTANT: Activate `volt-development` every time you're working with a Volt or single-file component-related task.
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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

Comments
 (0)