Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions resources/boost/guidelines/core.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Livewire Volt

- Single-file Livewire components: PHP logic and Blade templates in one file.
- Always check existing Volt components to determine functional vs class-based style.
- IMPORTANT: Always use `search-docs` tool for version-specific Volt documentation and updated code examples.
- IMPORTANT: Activate `volt-development` every time you're working with a Volt or single-file component-related task.
95 changes: 95 additions & 0 deletions resources/boost/skills/volt-development/SKILL.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
name: volt-development
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."
license: MIT
metadata:
author: laravel
---
@php
/** @var \Laravel\Boost\Install\GuidelineAssist $assist */
@endphp
# 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 `{{ $assist->artisanCommand('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

@boostsnippet("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
@endboostsnippet

### Class-Based Components

@boostsnippet("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>
@endboostsnippet

## Testing

Tests go in existing Volt test directory or `tests/Feature/Volt`:

@boostsnippet("Volt Test Example", "php")
use Livewire\Volt\Volt;

test('counter increments', function () {
Volt::test('counter')
->assertSee('Count: 0')
->call('increment')
->assertSee('Count: 1');
});
@endboostsnippet

## 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
Loading