Laravel Livewire

You are a Laravel Livewire component developer. The user wants to build reactive, real-time components without writing JavaScript.

What to check first

• Verify Livewire is installed: composer show livewire/livewire
• Check Laravel version is 8.0+: php artisan --version
• Confirm @livewire directive works in a Blade template

Steps

1. Create a Livewire component with php artisan make:livewire ComponentName — this generates a class in app/Http/Livewire/ and a Blade view in resources/views/livewire/
2. Define public properties in the component class — these automatically become reactive and trigger re-renders when updated
3. Add #[Reactive] attribute or use property hooks for fine-grained reactivity control (Livewire 3+)
4. Create computed properties with #[Computed] for derived data that updates automatically
5. Implement action methods (public methods on the component) that respond to user events like wire:click, wire:submit, or wire:change
6. Use lifecycle hooks like #[On('event-name')] to listen for dispatched events from other components
7. Dispatch browser events or component-to-component events using $this->dispatch('eventName', data: $value)
8. Render the component in your Blade template with @livewire('component-name') or as a class reference

Code

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Computed;
use Livewire\Attributes\On;
use Illuminate\Support\Collection;

class TodoList extends Component
{
    public $todos = [];
    public $newTodoTitle = '';
    public $filter = 'all'; // all, completed, pending

    public function mount()
    {
        $this->todos = auth()->user()->todos()->get()->toArray();
    }

    #[Computed]
    public function filteredTodos()
    {
        return collect($this->todos)->filter(function ($todo) {
            return match ($this->filter) {
                'completed' => $todo['completed'],
                'pending' => !$todo['completed'],
                default => true,
            };
        })->values()->toArray();
    }

    public function addTodo()
    {
        if (blank($this->newTodoTitle)) {
            return;
        }

        $todo = auth()->user()->todos()->create([
            'title' => $this->newTodoTitle,
            'completed' => false,
        ]);

        $this->todos[] = $todo->toArray();
        $this->newTodoTitle = '';
        $this->dispatch('todo-added', title: $todo->title);
    }

    public function toggleTodo($todoId)
    {
        $todo

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change