skills.rest
freekmurze
freekmurzeCOMMUNITY
Explore all skills by this author →
Website𝕏@freekmurzeGitHub

livewire-4

Build reactive Livewire 4 components and interfaces for Laravel applications.

999|201|Updated May 6, 2014
Search Tags:#Laravel#PHP#Frontend#Livewire#blade#wire:model#reactive components
One-click install
npx skills add https://github.com/freekmurze/dotfiles --skill livewire-4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: livewire-4
Source: https://github.com/freekmurze/dotfiles/tree/main/config/claude/skills/livewire-4
Command: npx skills add https://github.com/freekmurze/dotfiles --skill livewire-4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building interactive Laravel UIs traditionally requires writing JavaScript for reactivity. This Skill provides the patterns and syntax for Livewire 4, letting you create dynamic, reactive interfaces using only PHP and Blade templates.

Core Features & Use Cases

  • Component Formats: Create single-file components, multi-file components with separate PHP/Blade/JS/CSS files, and routable page components.
  • Data Binding & Actions: Implement wire:model binding variants, wire:click actions, computed properties, event modifiers, and loading states.
  • Security Patterns: Apply authorization and validation to protect against client-side manipulation of public properties.
  • Use Case: Build a reactive todo list or search interface in a Laravel app where typing in an input instantly filters results, without writing any JavaScript.

Quick Start

Create a Livewire 4 single-file component for a todo list with wire:model binding and a wire:click add action.

Frequently Asked Questions about livewire-4

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 post.create to generate a single-file component, which is the default and recommended format in Livewire 4. Add --mfc for a multi-file component with separate PHP, Blade, JS, and CSS files, or use pages:: namespace for routable page components.

What is the difference between wire:model and wire:model.live in Livewire?▼

wire:model syncs the property only when an action is triggered, while wire:model.live syncs on every input event for real-time updates. Other variants include wire:model.blur for syncing on blur and wire:model.live.debounce.500ms for debounced updates.

How do I convert between single-file and multi-file Livewire components?▼

Use php artisan livewire:convert post.create to auto-detect and convert the component format. Add --mfc to convert to multi-file or --sfc to convert to single-file explicitly.

Are Livewire public properties secure against user manipulation?▼

No, public properties can be manipulated client-side, so you must always validate and authorize before persisting data. Use $this->authorize() in actions and consider protected properties for sensitive values that should not be sent to the frontend.

How do I show loading states in Livewire 4?▼

Use Tailwind's data-loading variant like class="data-loading:opacity-50" on the triggering element, or use wire:loading directives to show elements during requests. The not-data-loading:hidden pattern hides elements while a request is in flight.

Related Skills

Explore More Software Engineering Skills→
relaticlerelaticle
1.5k

spatie-laravel-php

Enforce Spatie's Laravel and PHP coding standards across Laravel code and Blade templates.

Official
Intermediate
yunusemrgrlyunusemrgrl

laravel-specialist

Scaffold Laravel 10+ apps with models, authentication, APIs, queues, and Livewire.

Community
Advanced
gangelpr1991gangelpr1991

backend-testing-laravel-phpunit

Automate Laravel API testing with PHPUnit feature, service, and database assertions.

Community
Advanced
signals-rentalsignals-rental
15

livewire-development

Create, convert, and debug Livewire components in Laravel applications.

Official
Intermediate