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

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
CPX: The Composer Package Executor for PHP image

CPX: The Composer Package Executor for PHP

Read article
Laravel AI SDK Adds Human-in-the-Loop Tool Approval image

Laravel AI SDK Adds Human-in-the-Loop Tool Approval

Read article
Pest 5 Released With Test Impact Analysis, Agent Verification, and Evals image

Pest 5 Released With Test Impact Analysis, Agent Verification, and Evals

Read article
Queue-SQL: Run Mass Deletes and Updates Across Parallel Queue Jobs image

Queue-SQL: Run Mass Deletes and Updates Across Parallel Queue Jobs

Read article
Blade Formatting in Laravel Pint image

Blade Formatting in Laravel Pint

Read article
Inertia DevTools Is Now on the Chrome Web Store image

Inertia DevTools Is Now on the Chrome Web Store

Read article