September has been a massive month for Livewire - we've seen the release of Livewire v2, Laravel officially adopting it for its official boilerplate in Jetstream, and plenty of new tools and things happening across the community.
Let's jump into it!
Caleb Porzio announced Livewire v2 at Laracon in late August, but the official release didn't happen until September 7th, just ahead of the Laravel 8 release.
With this update, we got many great quality-of-life features. Here's just a few of them:
Subsequent AJAX requests are now much smaller if the HTML hasn't changed
A new @entangle()
directive that can be used to sync a value between Livewire and AlpineJS
A .defer
modifier for wire.model
(and entangle!) that can be used to prevent sending an AJAX request to update state until you perform a meaningful action
Component properties can now have their values reflected in the query string automatically
Validation rules for a component's properties can go in the $rules
property to be automatically validated
You can now bind Eloquent models to a component property and bind it with wire:model
AlpineJS components within Livewire components will now have access to a magic $wire
variable that represents the Livewire component in the frontend
The new $wire
variable can be used to call methods on the PHP component from JS seamlessly
Values given to a Livewire component are automatically autowired to properties - there's no need for a mount()
method just to set them now!
There were also a handful of breaking changes in this major version release, but it shouldn't take more than 10 minutes to update your existing project.
See the upgrade guide to learn how to update your project to Livewire 2
Along with this new major version, Caleb released a new free series of the Livewire screencasts, explaining how to upgrade an existing application to the new version, as well as refactoring old code to use the new features.
In case you forgot, Caleb also has a podcast where he talks about the development of Livewire, so if you want a peek into what the development for v2 has been like, give it a listen.
Plenty of community-supported tools have also been updated to support this new version of Livewire:
Also at Laracon, Taylor Otwell announced a new open-source package: Jetstream!
Jetstream will be the new recommended preset to start new applications, replacing the old laravel/ui Bootstrap preset going forwards.
Jetstream itself comes with a lot of useful features, such as out-of-the-box teams support, 2FA integration, and an account settings panel for users to update their details.
Also notable, Jetstream comes with a choice; pick between one of two tech stacks to get started:
This means that starting a new app with Livewire is now easier than ever!
Check out the Jetstream documentation
Despite the many great releases, version 2.2.5 was released with a small bug related to validation method. This was promptly fixed in 2.2.6, but you should make sure your application is using the latest release to avoid any potential issues.
Handling model attribute updates is now super-easy!
🔥 If you didn't know, @LaravelLivewire now triggers "updated" and "updating" hooks for nested properties, which works with both array and model properties! https://t.co/0RtwRPgfld
— Liam Hammett (@LiamHammett) Sep 20, 2020
Creating <select>
fields with Livewire is a lot simpler than plain Blade.
@LaravelLivewire no need to set "selected" explicitly when using #LiveWire https://t.co/shpeit8LJy
— Furqan Freed (@furqanfreed) Sep 9, 2020
Jorge González has also shared a trait to assist with making sortable lists.
For those out there using @LaravelLivewire Sortable package, I've refactored my PHP function's code and published a Trait to help you add basic sorting functionality to your Livewire components in case you don't know how to implement it.
https://t.co/DluMESCcRE https://t.co/aIMUlG3Gnq
— Jorge González (@iksaku2) Sep 19, 2020
Honby shared a component that shows how simple it can be to implement a language switcher with the laravel-localized-routes package.
Day 3 : a language switcher with @LaravelLivewire and https://t.co/Gz7AufqrnJ . the switcher can redirect to current url with selected language. (without any javascript)
I think there's a better approach.
#100DaysOfCode https://t.co/YMf8E9Z2y6
— Honby (@honbyk) Sep 25, 2020
The Livewire implementation on the Laravel Playground has been updated to use v2.
The @laravelphp playground has been updated to Laravel 8 and @LaravelLivewire 2.0 🥳
— Marcel Pociot 🧙♂️ (@marcelpociot) Sep 8, 2020
Not only that, but Marcel has been very busy, as he's released another great thing for Livewire - devtools!
I'm super excited to share v0.1 of the @LaravelLivewire devtools with you!
🔍 Inspect and modify your Livewire component state ⏳Time travel to component state
It works with your existing Livewire components out of the box.
https://t.co/C0fVTDiMsf https://t.co/NASyAmEL03
— Marcel Pociot 🧙♂️ (@marcelpociot) Sep 3, 2020
This month there have been a number of great articles, tutorials and guides to read up on, explaining how to use both the new and and old Livewire functionality to build some useful features.
Livewire Multistep Forms by CodeCourse
Using Laravel Livewire to render dynamic Gutenberg blocks by Chris Lloyd
Converting a Vue Component into a Livewire Component by Tony Lea
Build a SaaS URL shortener with Laravel Jetstream and Livewire by Saleem Hadad
Create a Phone Dialer App in PHP with Laravel Livewire and Twilio Voice by Shane Rosenthal
Each month we'll try to bring you a few new things that have been built using Livewire, so you can see what other people are using it for and maybe take some inspiration for your own work.
Taskord (a social productivity app)
Bootsfuehrerschein Theorie (a quizzing app)
Tweet Markdown (a utility that converts Tweets into markdown)
thenping.me is getting updates with the Livewire Jetstream bundle
The Livewire Discord server got officially verified by Discord!
Along with this, Dan Harrin hosted a Livewire meetup on the Discord server earlier this month, where people got together to share what they were doing with Livewire and help each other out. There was even an appearance by the man, the myth, the legend, himself - Caleb Porzio!
I’ll be hosting a meetup call on the @LaravelLivewire Discord server tonight at 8pm (GMT).
Discuss the v2 release, any projects you’ve been working on, and your love for the TALL stack! 🦒
Would be great to talk to you then! 😄
— Dan Harrin 🦒 (@danjharrin) Sep 10, 2020
If you're interested in participating in another meetup, make sure to drop by the Discord and introduce yourself. These will be held monthly, and the next meetup is on October 8 at 8pm UTC.