livewire-development

Original：🇺🇸 English

Translated

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.

2installs

Sourcespatie/freek.dev

Added on2026-02-08

NPX Install

npx skill4agent add spatie/freek.dev livewire-development

SKILL.md Content

View Translation Comparison →

Livewire Development

When to Apply

Activate this skill when:

Creating or modifying Livewire components
Using wire: directives (model, click, loading, sort, intersect)
Implementing islands or async actions
Writing Livewire component tests

Documentation

Use

search-docs

for detailed Livewire 4 patterns and documentation.

Basic Usage

Creating Components

<code-snippet name="Component Creation Commands" lang="bash">

Single-file component (default in v4)

Multi-file component

Class-based component (v3 style)

{{ $assist->artisanCommand('make:livewire create-post --class') }}

With namespace

</code-snippet>

Converting Between Formats

Use

php artisan livewire:convert create-post

to convert between single-file, multi-file, and class-based formats.

Component Format Reference

Format	Flag	Structure
Single-file (SFC)	default	PHP + Blade in one file
Multi-file (MFC)	`--mfc`	Separate PHP class, Blade, JS, tests
Class-based	`--class`	Traditional v3 style class
View-based	⚡ prefix	Blade-only with functional state

Single-File Component Example

<code-snippet name="Single-File Component Example" lang="php"> <?php use Livewire\Component; new class extends Component { public int $count = 0; public function increment(): void { $this->count++; } } ?> <div> <button wire:click="increment">Count: @{{ $count }}</button> </div> </code-snippet>

Livewire 4 Specifics

Key Changes From Livewire 3

These things changed in Livewire 4, but may not have been updated in this application. Verify this application's setup to ensure you follow existing conventions.

Use

Route::livewire()

for full-page components; config keys renamed:

layout

→

component_layout

,

lazy_placeholder

→

component_placeholder

.

```
wire:model
```
now ignores child events by default (use
```
wire:model.deep
```
for old behavior);
```
wire:scroll
```
renamed to
```
wire:navigate:scroll
```
.
Component tags must be properly closed;
```
wire:transition
```
now uses View Transitions API (modifiers removed).

JavaScript:

$wire.$js('name', fn)

→

$wire.$js.name = fn

;

commit

/

request

hooks →

interceptMessage()

/

interceptRequest()

.

New Features

Component formats: single-file (SFC), multi-file (MFC), view-based components.
Islands (
```
@island
```
) for isolated updates; async actions (
```
wire:click.async
```
,
```
#[Async]
```
) for parallel execution.
Deferred/bundled loading:
```
defer
```
,
```
lazy.bundle
```
for optimized component loading.

Feature	Usage	Purpose
Islands	`@island(name: 'stats')`	Isolated update regions
Async	`wire:click.async` or `#[Async]`	Non-blocking actions
Deferred	`defer` attribute	Load after page render
Bundled	`lazy.bundle`	Load multiple together

New Directives

wire:sort

,

wire:intersect

,

wire:ref

,

.renderless

,

.preserve-scroll

are available for use.

```
data-loading
```
attribute automatically added to elements triggering network requests.

Directive	Purpose
`wire:sort`	Drag-and-drop sorting
`wire:intersect`	Viewport intersection detection
`wire:ref`	Element references for JS
`.renderless`	Component without rendering
`.preserve-scroll`	Preserve scroll position

Best Practices

Always use
```
wire:key
```
in loops
Use
```
wire:loading
```
for loading states
Use
```
wire:model.live
```
for instant updates (default is debounced)
Validate and authorize in actions (treat like HTTP requests)

Configuration

smart_wire_keys

defaults to

true

; new configs:

component_locations

,

component_namespaces

,

make_command

,

csp_safe

.

Alpine & JavaScript

```
wire:transition
```
uses browser View Transitions API;
```
$errors
```
and
```
$intercept
```
magic properties available.
Non-blocking
```
wire:poll
```
and parallel
```
wire:model.live
```
updates improve performance.

For interceptors and hooks, see reference/javascript-hooks.md.

Testing

<code-snippet name="Testing Example" lang="php">

Livewire::test(Counter::class) ->assertSet('count', 0) ->call('increment') ->assertSet('count', 1);