skills.rest
LaravelDaily
LaravelDailyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

livewire-development

Builds, converts, and debugs Livewire 4 components in Laravel applications.

1|Updated Aug 4, 2026
Search Tags:#php#components#migration#laravel#reactive ui#livewire#blade
One-click install
npx skills add https://github.com/LaravelDaily/nativephp-larapackagehunt --skill livewire-development-laraveldaily
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: livewire-development
Source: https://github.com/LaravelDaily/nativephp-larapackagehunt/tree/main/.agents/skills/livewire-development
Command: npx skills add https://github.com/LaravelDaily/nativephp-larapackagehunt --skill livewire-development-laraveldaily

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Livewire 4 introduces new component formats, directives, and breaking changes from v3 that are easy to get wrong. This Skill guides AI agents through creating components in the correct format, migrating from Livewire 3, and avoiding common pitfalls like missing wire:key attributes or deprecated config keys. ## Core Features & Use Cases - Component Creation: Generate single-file (SFC), multi-file (MFC), full-page, or class-based components via artisan commands, respecting existing project conventions and config overrides. - Livewire 3 to 4 Migration: Apply breaking-change knowledge covering Route::livewire, renamed config keys, wire:model behavior changes, and new JavaScript interceptor APIs. - Modern Feature Usage: Implement islands, async actions, deferred loading, wire:sort drag-and-drop, and wire:intersect viewport detection. - Use Case: A developer asks to add a sortable task list with real-time validation to a Laravel app; the Skill produces a v4-compliant SFC using wire:sort and wire:model.live with proper wire:key usage. ## Quick Start Ask the agent to create a Livewire component for a contact form with real-time validation following this project's existing component format.

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 4 component in Laravel?▼

Run php artisan make:livewire create-post to generate a single-file component at resources/views/components/⚡create-post.blade.php. Use --mfc for multi-file format, --class for v3-style class-based components, or pages::name for full-page components.

What changed in Livewire 4 compared to Livewire 3?▼

Livewire 4 defaults to single-file components, uses Route::livewire for full pages, renames config keys like layout to component_layout, and makes wire:model ignore child events by default. JavaScript hooks changed to interceptMessage and interceptRequest APIs.

How do I convert a Livewire component between SFC and class-based formats?▼

Run php artisan livewire:convert create-post to convert between single-file, multi-file, and class-based formats. Check config/livewire.php for make_command settings that control the default format and emoji prefix.

Why is my Livewire component re-rendering unexpectedly in loops?▼

Missing wire:key attributes on @foreach loop elements cause unexpected re-rendering in Livewire. Always add a unique wire:key to each looped element so Livewire can track DOM nodes correctly across updates.

Does Livewire 4 require a separate Alpine.js installation?▼

No, Alpine.js is bundled with Livewire 4 and should not be included separately. Including it again causes conflicts; use the built-in Alpine integration along with magic properties like $errors and $intercept.

Related Skills

Explore More Software Engineering Skills→
1naichii1naichii

laravel-livewire

Develop reactive Laravel Livewire interfaces with server-side rendering and real-time validation.

Community
Advanced
Barata-RibeiroBarata-Ribeiro
2

pest-testing

Automate Laravel application testing with Pest 3 unit and feature tests.

Community
Advanced
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
mefardalesmefardales

alpine-js

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

Community
Intermediate