The new Livewire v3 has better diffing, features can be built faster, and there is less duplication between Livewire and Alpine because it relies more on Alpine and uses its Morph, History, and other plugins. Several of the new features were also made possible by restructuring the codebase and placing a greater emphasis on Alpine.
1. Inject Livewire Scripts, Styles, and Alpine Automatically
After composer installing Livewire v2, you must manually add @livewireStyles, @livewireScripts, and Alpine to your layout. With Livewire v3, you just need to install Livewire and everything you need is automatically injected - including Alpine!
2. JavaScript Functions in PHP classes
Livewire v3 will support writing JavaScript functions directly in your backend Livewire components. Add a function to your component, add a /*_ @js _/ comment above the function, then return some JavaScript code using PHP’s HEREDOC syntax and call it from your frontend. The JavaScript code will be executed without sending any requests to your backend.
3. Locked Properties
Livewire v3 will support locked properties - properties that cannot be updated from the frontend. Add a /** @locked / comment above a property on your component, and Livewire will throw an exception if someone attempts to update that property from the frontend.
4. Wire:model Is Deferred by Default
As Livewire and its usage have evolved, we’ve realized that the “deferred” behavior makes more sense for 95% of forms, so in v3 “deferred” functionality will be the default. This will save on unnecessary requests going to your server and improve performance. When you need the “live” functionality on an input, you may use wire:model.live to enable that functionality.
5. Requests Are Batched
In Livewire v2, if you have multiple components using wire:poll or dispatching and listening for events, each one of those components will send separate requests to the server on each poll or event. In Livewire v3, there is intelligent batching of requests so that wire:polls, events, listeners, and method calls can be batched into one request when possible, saving even more requests and improving performance.
6. Reactive Properties
In Livewire v3, when you pass a piece of data to a child component , add a /*_ @prop _/ comment above the property in the child, then update it in the parent component, it will be updated in the child component.
7. Access Parent Component’s Data and Methods Using $parent
In Livewire v3, there will be a new way to access a parent component’s data and methods. There’s a new $parent property that can be accessed to call methods on the parent.
8. Teleport
Livewire v3 will also include a new @teleport Blade directive that will allow you to “teleport” a piece of markup and render it another part of the DOM. This can sometimes help avoid z-index issues with modals and slideouts.
9. Lazy Components
In Livewire v3, just add a lazy attribute when rendering a component, and it won’t be rendered initially. When it comes into the viewport, Livewire will fire off a request to render it. You’ll also be able to add placeholder content by implementing the placeholder method on your component.
Simplicity and Power in Livewire V3
The combination of simplicity and power is what makes Laravel Livewire so awesome and why it is used by so many developers. It is especially a good alternative to the Laravel + Inertia + Vue combination. In particular Laravel is also bundled up with other frameworks which are powerful and to work with.
