News

Everything We Know About Livewire 4

Published
Everything We Know About Livewire 4 image

Caleb Porzio presented Livewire 4 on the second day of Laracon US 2025, unveiling the next major version of Livewire. There's no way I can do justice to what Caleb presented, so do yourself a favor and watch Caleb's presentation at Laracon US 2025.

I'll try my best to share the highlights, but trust me, watch his presentation!

Livewire 4 adds some huge performance gains via Blaze, some DX love to consolidate how we create components and organize them, and more:

  • Livewire 4 should have minimal breaking changes
  • Single-file components are the default with make:livewire
  • Create multi-file, co-located components with make:livewire --mfc
  • The Livewire::visit() method is coming to Pest 4 to do browser testing of Livewire components
  • Component Slots
  • The @island directive
  • And more..

Livewire Component Organization

Creating components in Livewire 4 defaults to single-file compoents, which is a useful way to co-locate component code for the view, component PHP logic, and JavaScript.

Livewire 4 single file component
Livewire 4 single file component

If your component starts to grow—or you prefer separate files for views, components, and JS—you can create multi-file components (MFCs), which splits all the various parts of a Livewire component into separate but co-located files:

Livewire 4 multi-file components (MFC)
Livewire 4 multi-file components (MFC)

In MFCs, JavaScript files are served as ES6 modules, and give you access to running whatever JS you want inside the file. This also solves the syntax highlighting issues currently in SFCs.

Livewire Visit

Livewire 4 has an API that works with Pest 4 called Livewire::visit(), which runs a Livewire component test in the browser and leverages Playwright similar to Pest 4's visit() API.

Using the Livewire::visit() API with Pest 4 and Livewire
Using the Livewire::visit() API with Pest 4 and Livewire

Blaze, Slots, Islands, Oh My!

Livewire 4 supports slots that work like you'd expect {{ $slot }}, but the real show-stealer was the huge performance gains from Blaze, which makes rendering blazing fast!

Along with Blaze, the @island component in Livewire 4 is helpful to take an expensive part of a component and put it on an island. On the island, that part of the component will not affect the performance of other parts of the component. Using the lazy: true argument, you can make the island load lazily. You can also poll an island using @island(poll: '5s'). Here's what an example from Caleb's talk at Laracon US:

Using an island with a placeholder to render placeholder data
Using an island with a placeholder to render placeholder data
The placeholder rendering while the island loads
The placeholder rendering while the island loads

Which feature are you most excited about? Let us know on your favorite social media app!

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

acquaintsoft logo
Acquaint Softtech

Hire Laravel developers with AI expertise at $20/hr. Get started in 48 hours.

Visit Acquaint Softtech

The latest

View all →
PhpStorm 2026.3 Adds an Agent Workspace and PHP 8.6 Support image

PhpStorm 2026.3 Adds an Agent Workspace and PHP 8.6 Support

Read article
Insert Middleware Before or After Existing Laravel Middleware image

Insert Middleware Before or After Existing Laravel Middleware

Read article
Laravel Herd 2: Coding Agents, Workspaces, and Cloud Deploys image

Laravel Herd 2: Coding Agents, Workspaces, and Cloud Deploys

Read article
Strict Request Input Casting in Laravel image

Strict Request Input Casting in Laravel

Read article
Prevent Duplicate File Uploads With Laravel Storage Dedupler image

Prevent Duplicate File Uploads With Laravel Storage Dedupler

Read article
Slow Job Alerts and Replica Commit IDs in Laravel 13.40 image

Slow Job Alerts and Replica Commit IDs in Laravel 13.40

Read article