---
name: livewire-development
description: "Use for any task or question involving Livewire. Activate if user mentions Livewire, wire: directives, or Livewire-specific concepts like wire:model, wire:click, wire:sort, or islands, invoke this skill. Covers building new components, debugging reactivity issues, real-time form validation, drag-and-drop, loading states, migrating from Livewire 3 to 4, converting component formats (SFC/MFC/class-based), and performance optimization. Do not use for non-Livewire reactive UI (React, Vue, Alpine-only, Inertia.js) or standard Laravel forms without Livewire."
license: MIT
metadata:
  author: laravel
---
@php
/** @var \Laravel\Boost\Install\GuidelineAssist $assist */
@endphp
# Livewire Development

## Documentation

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

## Basic Usage

### Creating Components

```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') }}
```

### Converting Between Formats

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

### Choosing a Component Format

Before creating a component, check `config/livewire.php` for directory overrides, which change where files are stored. Then, look at existing files in those directories (defaulting to `{{ $assist->appPath('Livewire/') }}` and `resources/views/livewire/`) to match the established convention.

### Component Format Reference

| Format | Flag | Class Path | View Path |
|--------|------|------------|-----------|
| Single-file (SFC) | default | — | `resources/views/livewire/create-post.blade.php` (PHP + Blade in one file) |
| Multi-file (MFC) | `--mfc` | `{{ $assist->appPath('Livewire/CreatePost.php') }}` | `resources/views/livewire/create-post.blade.php` |
| Class-based | `--class` | `{{ $assist->appPath('Livewire/CreatePost.php') }}` | `resources/views/livewire/create-post.blade.php` |
| View-based | ⚡ prefix | — | `resources/views/livewire/create-post.blade.php` (Blade-only with functional state) |

Namespaced components map to subdirectories: `make:livewire Posts/CreatePost` creates files at `{{ $assist->appPath('Livewire/Posts/CreatePost.php') }}` and `resources/views/livewire/posts/create-post.blade.php`.

### 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\htdocs\eloboost24\vendor\laravel\boost\.ai\livewire\4\skill\livewire-development\SKILL.blade.php:60
Stack trace:
#0 {main}
  thrown in <b>C:\laragon\htdocs\eloboost24\vendor\laravel\boost\.ai\livewire\4\skill\livewire-development\SKILL.blade.php</b> on line <b>60</b><br />