Livewire v. 3 – what’s new

New core based on Alpine: The core of Livewire has been completely rewritten, increasing the dependency on Alpine and using it under the hood. According to Caleb, this means better comparison of changes, faster creation of new features, and less duplication between Livewire and Alpine.

Livewire scripts, styles and Alpine are injected automaticallyA: After installing Livewire v3, you no longer have to manually add @livewireStyles, @livewireScripts and Alpine to your layout. All this is implemented automatically.

Hot reload without build stepA: Livewire v3 includes hot reload without a build step. Just save the file in your editor and see those changes instantly in your browser without breaking the state of your components!

wire:transition: Livewire v3 will have a wrapper around x-transition called wire:transition. Add wire:transition to any element that will be shown or hidden with Livewire and get very transitions.

Writing JavaScript functions in your PHP classes: Livewire v3 supports writing JavaScript functions directly in your Livewire server components. You can 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. So much for “believe in the backend”))

@locked properties: Livewire v3 will support locked properties – properties that cannot be updated from the frontend.

wire:model deferred by default: “deferred” behavior will become the default functionality in v3. According to many, this saves unnecessary requests to the server and improves performance.

Requests are grouped: Livewire v3 now “smartly groups requests” so that wire:polls, events, listeners can be combined into a single request.

Reactive properties: Old Livewire issue with nested components seems to be solved. Adding /** @prop */ above a property in a child component, updating it in the parent component, causes an update in the child component.

/@modelable / properties*: In Livewire v3 you can add wire:model when using an input component, then inside the input component add /** @modelable */ above the property where you store the value for the component and Livewire does the rest.

Accessing parent component data and methods with $parent: In Livewire v3 there will be a new way to access the data and methods of the parent component.

@teleport: Livewire v3 will also include a new @teleport Blade directive that will allow you to “teleport” a piece of markup and render it to another part of the DOM.

Lazy “lazy” components: Livewire v3 will have “lazy” components. Just add the “lazy” attribute when rendering the component and it won’t render initially.

wire:navigate: In Livewire v3 you can add wire:navigate to any anchor tag and on click Livewire will load the page in the background, then replace the DOM which “adds more SPA-like feel”.

@persist: Another Blade directive that Livewire v3 will include is @persist. Using @persist in combination with wire:navigate will allow “app snippets” to be saved when navigating through pages.