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

serpapi logo
SerpApi

The Web Search API for Your LLM and AI Applications

Visit SerpApi

The latest

View all →
Lerd: A Free, Open Source Herd Alternative for Linux and macOS image

Lerd: A Free, Open Source Herd Alternative for Linux and macOS

Read article
Let's Encrypt HTTPS on an IP Address With FrankenPHP image

Let's Encrypt HTTPS on an IP Address With FrankenPHP

Read article
Laravel Chores: Resumable Data Operations and Cleanups image

Laravel Chores: Resumable Data Operations and Cleanups

Read article
NativePHP v4: Build Native iOS and Android UI in Blade image

NativePHP v4: Build Native iOS and Android UI in Blade

Read article
Laravel Lock: Distributed Locks for Models and Routes image

Laravel Lock: Distributed Locks for Models and Routes

Read article
Laravel Image Responses: Serve Resized Images From Routes image

Laravel Image Responses: Serve Resized Images From Routes

Read article