laravel-livewire

fusengine's avatarfrom fusengine

Build reactive components with Livewire 3, wire:model, actions, lifecycle hooks, Volt, and Folio. Use when creating interactive UI without JavaScript, forms, or real-time updates.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill enables the rapid development of reactive, full-stack components using Laravel Livewire 3. It streamlines the creation of interactive user interfaces by leveraging features like wire:model for data binding, lifecycle hooks for state management, and Volt for single-file components, allowing developers to build modern, real-time web applications entirely within the PHP ecosystem.

Use Cases

  • Building interactive dashboards: Create real-time data visualizations, search filters, and paginated tables without writing custom JavaScript.
  • Advanced form handling: Implement complex multi-step forms with instant server-side validation using Livewire Precognition.
  • Single-file component development: Use Livewire Volt to combine logic and templates for a more streamlined and maintainable codebase.
  • Real-time UI updates: Integrate WebSockets via Laravel Reverb to push live notifications and data updates to the front-end seamlessly.
  • File-based routing: Utilize Laravel Folio to simplify application structure and speed up the development of page-based components.
namelaravel-livewire
descriptionBuild reactive components with Livewire 3, wire:model, actions, lifecycle hooks, Volt, and Folio. Use when creating interactive UI without JavaScript, forms, or real-time updates.

Laravel Livewire 3

Documentation

Component Class

<?php

declare(strict_types=1);

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Computed;

final class PostList extends Component
{
    use WithPagination;

    public string $search = '';

    #[Rule('required|min:3')]
    public string $title = '';

    #[Computed]
    public function posts()
    {
        return Post::query()
            ->when($this->search, fn ($q) => $q->where('title', 'like', "%{$this->search}%"))
            ->paginate(10);
    }

    public function create(): void
    {
        $this->validate();
        Post::create(['title' => $this->title]);
        $this->reset('title');
        $this->dispatch('post-created');
    }

    public function render()
    {
        return view('livewire.post-list');
    }
}

Blade View

<div>
    <input type="text" wire:model.live.debounce.300ms="search">

    <form wire:submit="create">
        <input type="text" wire:model="title">
        @error('title') <span>{{ $message }}</span> @enderror
        <button type="submit">Create</button>
    </form>

    @foreach($this->posts as $post)
        <div wire:key="{{ $post->id }}">
            {{ $post->title }}
            <button wire:click="delete({{ $post->id }})" wire:confirm="Delete?">
                Delete
            </button>
        </div>
    @endforeach

    {{ $this->posts->links() }}
</div>

Volt (Single-File)

<?php
use function Livewire\Volt\{state, computed};

state(['count' => 0]);
$increment = fn () => $this->count++;
$doubled = computed(fn () => $this->count * 2);
?>

<div>
    <h1>{{ $count }}</h1>
    <p>Doubled: {{ $this->doubled }}</p>
    <button wire:click="increment">+</button>
</div>