Exciting news! Caleb has announced that Livewire v3 for Laravel is launching on July 20th at @LaraconUS. Let's take a look at some of the features Caleb announced back in 2022.
First, you no longer need to add the @livewireStyles or @livewireScripts directives. Just run composer require livewire/livewire, and you are good to go.
Livewire is now powered by Alpine and is included automatically as well.
Hot reloading out of the box, no build steps required 🔥 No need to refresh your browser anymore; Livewire takes care of everything and even preservers state 🤯
You can now use wire:transition to add smooth transitions to any of your HTML elements. This uses Alpine's x-transition directive behind the scene.
![](https://philo.dev/content/images/2023/07/FcoLWC0XgAM_n14.jpeg)
You can now inject and call javascript from within your Livewire component class. This will eliminate the extra HTTP request.
![](https://philo.dev/content/images/2023/07/FcoIdTbWQAAOvqN.jpeg)
You can now lock properties to ensure they aren't modified by the user. Add the locked docblock above the property, and you are all set.
![](https://philo.dev/content/images/2023/07/FcoI2v-WYAAUvFy.jpeg)
That's not all; you can also use docblocks to format a given property. For example, you might want a Carbon date object to be formatted to 'd/m/y' when presented on the front-end.
![](https://philo.dev/content/images/2023/07/FcoJS6bXwAEAsi7.jpeg)
Livewire models are now deferred by default to minimize server requests. If you do want to make continuous updates, simply add ".live," and you are all set. This is a breaking change but is easy to fix with a quick find and replace.
![](https://philo.dev/content/images/2023/07/FcoKSsxXgAEcLjR.jpeg)
Component requests are now batched! 🤩
![](https://philo.dev/content/images/2023/07/FcoLPoYXwAM7eoo.jpeg)
Reactivity for nested components 🔥 You can use a docblock to define if a property should be reactive.
![](https://philo.dev/content/images/2023/07/FcoMyefXEAAZt8K.jpeg)
Save yourself some keystrokes by passing properties using this new syntax
![](https://philo.dev/content/images/2023/07/FcoNQ0sXkAAJWJS.jpeg)
You can now use Livewire components for things like input fields as well and make properties 'modelable', which is great when nesting components.
![](https://philo.dev/content/images/2023/07/FcoO4C_WQAgNQ8r.jpeg)
When nesting components, you can use the new $parent variable to access the parent component. For example, this would trigger the 'sayHello' method on the parent component when pressing the enter key.
![](https://philo.dev/content/images/2023/07/FcoQTeVXEAAzyxZ.jpeg)
A new teleport directive allows you to teleport data to a different element on the page, even when this element lives outside your component!
![](https://philo.dev/content/images/2023/07/FcoRoajWIAAG3uD.jpeg)
SPA vibes using wire:navigate, you get snappy and almost instant responses 🚀
![](https://philo.dev/content/images/2023/07/FcoUas4WYAMXVa_.jpeg)
Use wire:navigate.prefetch to initiate the request once a user hovers the link to make it even snappier!
![](https://philo.dev/content/images/2023/07/FcoVJsEWAAIuBkq.jpeg)
So many great features! And there might be even more; let's wait and see if Caleb will announce more amazing features at the LaraconUS launch event.