---
name: livewire-development
description: >-
  Develops reactive Livewire 4 components. Activates when creating, updating, or modifying
  Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives;
  adding real-time updates, loading states, or reactivity; debugging component behavior;
  writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.
---
@php
/** @var \Laravel\Boost\Install\GuidelineAssist $assist */
@endphp
# Livewire Development

## When to Apply

Activate this skill when:

- Creating or modifying Livewire components
- Using wire: directives (model, click, loading, sort, intersect)
- Implementing islands or async actions
- Writing Livewire component tests

## Documentation

Use `search-docs` for detailed Livewire 4 patterns and documentation.

## Basic Usage

### Creating Components

@boostsnippet("Component Creation Commands", "bash")
# Single-file component (default in v4)
{{ $assist->artisanCommand('make:livewire create-post') }}

# Multi-file component
{{ $assist->artisanCommand('make:livewire create-post --mfc') }}

# Class-based component (v3 style)
{{ $assist->artisanCommand('make:livewire create-post --class') }}

# With namespace
{{ $assist->artisanCommand('make:livewire Posts/CreatePost') }}
@endboostsnippet

### Converting Between Formats

Use `{{ $assist->artisanCommand('livewire:convert create-post') }}` to convert between single-file, multi-file, and class-based formats.

### Component Format Reference

| Format | Flag | Structure |
|--------|------|-----------|
| Single-file (SFC) | default | PHP + Blade in one file |
| Multi-file (MFC) | `--mfc` | Separate PHP class, Blade, JS, tests |
| Class-based | `--class` | Traditional v3 style class |
| View-based | ⚡ prefix | Blade-only with functional state |

### Single-File Component Example

@boostsnippet("Single-File Component Example", "php")
<br />
<b>Fatal error</b>:  Uncaught Error: Class &quot;Livewire\Component&quot; not found in C:\laragon\www\saas-app\vendor\laravel\boost\.ai\livewire\4\skill\livewire-development\SKILL.blade.php:64
Stack trace:
#0 {main}
  thrown in <b>C:\laragon\www\saas-app\vendor\laravel\boost\.ai\livewire\4\skill\livewire-development\SKILL.blade.php</b> on line <b>64</b><br />