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
@islanddirective - 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.
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:
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.
Livewire::visit() API with Pest 4 and LivewireBlaze, 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:
Which feature are you most excited about? Let us know on your favorite social media app!
