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

masteringlaravel logo
Laravel Code Review

Get expert guidance in a few days with a Laravel code review

Visit Laravel Code Review

The latest

View all →
Unlearn.dev goes free for a weekend, October 10 and 11 image

Unlearn.dev goes free for a weekend, October 10 and 11

Read article
Tashil: Laravel Subscription Plans and Feature Usage Limits image

Tashil: Laravel Subscription Plans and Feature Usage Limits

Read article
Decide with Jev: Laravel AI That Answers with a Probability image

Decide with Jev: Laravel AI That Answers with a Probability

Read article
JetBrains Air: Run AI Coding Agents in JetBrains IDEs image

JetBrains Air: Run AI Coding Agents in JetBrains IDEs

Read article
Memoize Tagged Cache Reads in Laravel image

Memoize Tagged Cache Reads in Laravel

Read article
Eloquent Refreshes: Load Generated Columns After Save image

Eloquent Refreshes: Load Generated Columns After Save

Read article