Everything New in Livewire 4
Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.
Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.
Progress
Series Info
- Episodes
- 25
- Run Time
- 2h 35m
- Difficulty
- Intermediate
- Last Updated
- Jan 14, 2026
- Version
- Latest
Series Episodes
- Getting Started (4)
Welcome to Livewire 4
Livewire 4 is here, and it's packed with features that make building reactive interfaces even more enjoyable. In this opening episode, we'll tour the vision behind this release and get you set up for the series ahead. Whether you're upgrading or starting fresh, you're in for a treat.View-Based Components
Say goodbye to hunting through multiple folders. Livewire 4 introduces view-based components that keep your PHP and Blade together in a single file. We'll explore single-file and multi-file component formats, and show you why co-location makes your components easier to find and maintain.Page Components
Livewire components can serve as entire pages in your application. We'll cover the newRoute::livewire()helper, layouts, page titles, and how component namespaces keep your app well-organized.Installing Flux
For the rest of this series, we'll be using Flux to build out our examples. Flux is the official UI component library for Livewire, giving you beautifully designed form controls, cards, and layouts out of the box. Let's get it installed and see how quickly you can have a polished-looking app.
- Testing (3)
Unit Testing
Testing Livewire components is straightforward, and Livewire provides a fluent testing API that makes it almost enjoyable. We'll cover the fundamentals of testing component state, calling actions, and asserting rendered output using Pest.Browser Testing
Pest v4 introduces first-party browser testing powered by Playwright, and Livewire integrates beautifully with it. We'll write tests that spin up a real browser, click buttons, type into inputs, and verify that everything works exactly as your users would experience it.Co-locating Tests
Sometimes it makes sense to keep your test files right next to your components. Livewire makes this simple with artisan commands for creating and moving co-located tests. We'll explore when this organizational pattern makes sense and how to set it up.
- Loading States (3)
Loading States with data-loading
Livewire 4 introduces a newdata-loadingattribute that's automatically added to elements during network requests. Combined with Tailwind's new data attribute variants, you can style loading states directly in your markup withoutwire:targetor other workarounds.Lazy Loading Placeholders
Lazy loading components prevent slow queries from blocking your page. The new@placeholderdirective lets you define skeleton loaders and spinners right in your component template, keeping everything in one place. No more separate placeholder methods.Bundling Lazy Requests
By default, lazy components load in parallel with isolated requests. But what if you want to bundle them together? We'll explore thebundleparameter and when you might want multiple lazy components to share a single network request.
- Composition (3)
Forwarding Attributes
A pattern you know from Blade components now works with Livewire. You can pass HTML attributes likeclassor Alpine directives directly into a Livewire component and forward them to elements inside.Slots
Slots bring a powerful new pattern to Livewire components. You can pass Blade content into a child component while keeping that content reactive with the parent. This unlocks new composition patterns without entangling parent and child state.Optimistic UI with wire:show
Thewire:showdirective toggles element visibility without network requests. Combined withwire:textand other client-side utilities, you can build snappy, optimistic interfaces that respond instantly.
- Islands (5)
Islands
This is the headline feature of Livewire 4. Islands let you create isolated regions within a component that update independently. Get the performance benefits of nested components without the overhead of managing separate files, props, or events.Named Islands
When you need more control, give your islands names. Named islands can be linked together so they update as a group, and you can target them from anywhere in your component. We'll explore naming strategies and thewire:islanddirective.Lazy Islands
Just like lazy-loading entire components, you can defer individual islands until after the page loads. Breaking up expensive operations without restructuring your component. The slow parts load when they're ready; the rest of your page stays fast.Nested Islands
Islands can be nested inside other islands, adding another layer of control over what re-renders and when. We'll explore options likealways: trueto force updates, and discuss when nested islands make sense.Appending to Islands
Islands typically replace their content when they update. But for infinite scroll, pagination, or real-time feeds, you want to append instead. Thewire:island.appendmodifier makes this possible, efficiently adding content without re-rendering the entire list.
- Drag and Drop Sorting (1)
- JavaScript (6)
Element Refs with wire:ref
Need to target a specific element or component in your JavaScript? Thewire:refdirective gives elements a name you can reference anywhere. Dispatch events to specific components, access DOM elements with$refs, or stream content to targeted locations.Tracking Dirty State
The new$wire.$dirty()method lets you check if a property's value has diverged from the server. It's a reactive boolean you can use to show "unsaved changes" indicators, disable buttons, or trigger other UI feedback while users edit forms.JSON Methods
Sometimes you need to fetch data for JavaScript without re-rendering your component. The#[Json]attribute marks an action as a JSON endpoint, returning data directly to your Alpine or vanilla JavaScript. Handle success and validation errors with promises.JavaScript Actions
Create simple JavaScript functions in your component's script tag and call them fromwire:clickor other directives using$js. It's a lightweight way to execute client-side code without leaving your Livewire component.Action Interceptors
Intercept any action before it hits the server. Cancel requests, show loading states, store scroll positions, or trigger custom side effects. The new$wire.intercept()API gives you fine-grained control over individual method calls.Request Interceptors
Take interception to the global level. Request interceptors let you hook into every Livewire request across your entire application. Handle session expiration, customize redirect behavior, add logging, or implement your own error recovery.
