skills.rest
MoisesCorcho
MoisesCorchoCOMMUNITY
Explore all skills by this author →
GitHub

livewire-development

Builds, debugs, and migrates Livewire 3 components within Laravel applications.

1|Updated Mar 24, 2026
Search Tags:#testing#php#components#migration#laravel#reactivity#livewire
One-click install
npx skills add https://github.com/MoisesCorcho/anime-recommender --skill livewire-development-moisescorcho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: livewire-development
Source: https://github.com/MoisesCorcho/anime-recommender/tree/main/.agents/skills/livewire-development
Command: npx skills add https://github.com/MoisesCorcho/anime-recommender --skill livewire-development-moisescorcho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Livewire development involves framework-specific conventions that changed significantly between versions 2 and 3, causing bugs like broken reactivity, missing wire:key attributes, and outdated event dispatching. This Skill provides the correct Livewire 3 patterns so components work as expected. ## Core Features & Use Cases - Component Creation & Structure: Generate new Livewire components with Artisan and follow correct conventions like the App\Livewire namespace and single root elements. - Livewire 2 to 3 Migration: Apply key changes such as wire:model.live for real-time updates, $this->dispatch() for events, and the components.layouts.app layout path. - Reactivity & Testing Patterns: Implement loading states with wire:loading, lifecycle hooks like mount() and updatedFoo(), and test components with Livewire::test assertions. - Use Case: A user reports that a search input no longer updates results in real time after upgrading to Livewire 3; this Skill identifies that wire:model is now deferred by default and switches it to wire:model.live. ## Quick Start Ask the assistant to create a Livewire component with real-time search and loading states following Livewire 3 conventions.

Frequently Asked Questions about livewire-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Livewire component in Laravel?▼

Run the Artisan command php artisan make:livewire Posts\CreatePost to generate a new component. Livewire 3 components use the App\Livewire namespace and require a single root element in their Blade view.

How do I migrate from Livewire 2 to Livewire 3?▼

Key changes include using wire:model.live for real-time updates since wire:model is now deferred, moving components to the App\Livewire namespace, replacing emit with $this->dispatch(), and using the components.layouts.app layout path.

Why is wire:model not updating in real time in Livewire 3?▼

In Livewire 3, wire:model is deferred by default and only syncs on the next action. Use wire:model.live to get real-time updates as the user types.

Does Livewire 3 require installing Alpine.js separately?▼

No, Alpine.js is bundled with Livewire 3 and should not be included manually. The persist, intersect, collapse, and focus Alpine plugins are also included by default.

How do I test Livewire components in Laravel?▼

Use Livewire::test(Component::class) to assert property state, call actions, and verify rendered output, for example assertSet('count', 0) then call('increment'). You can also assert a component exists on a page with assertSeeLivewire.

Why do Livewire loops behave unexpectedly when items change?▼

Missing wire:key attributes in @foreach loops cause Livewire to misidentify DOM elements during updates. Add a unique wire:key such as wire:key="item-{{ $item->id }}" to each looped element.

Related Skills

Explore More Software Engineering Skills→
angelgarciasolorzanoangelgarciasolorzano

laravel-specialist

Build and configure Laravel 10+ applications with Eloquent models, authentication, queues, and APIs.

Community
Advanced
14nethuwa14nethuwa

canary

Monitor live deployments for console errors, performance regressions, and page failures.

Community
Advanced
AratKruglikAratKruglik
9

laravel-conventions

Standardize Laravel backend conventions for routing, actions, form requests, policies, and Inertia.

Community
Advanced
mefardalesmefardales

alpine-js

Implement reactive behavior in server-rendered HTML with Alpine.js directives and stores.

Community
Intermediate