Livewire 4

I'm a big fan of Livewire, the SaaS I've been building for the last couple of years has been using Livewire since its inception! I recently updated it to Livewire 4 and wanted to talk about a few of the new features and functionality it adds.

Islands

Lets go over the biggest feature Livewire 4 adds and probably my favourite, Islands. Islands allow you to create isolated regions in a component that are independent from the rest of the component. Previously, you'd have to extract this to a child component which could get messy. My SaaS is now using islands heavily, which allowed me to reduce the overall number of components.

View Based Components

Livewire 4 adds view based components. Historically you would have a blade component tied to a PHP class, whereas now you can have your PHP and html in the same file. If I'm honest, I probably won't reach for this that often. I do prefer having logic in separate classes. I think if I ever did use View based components, it would be for super small/simple components.

Drag and Drop

This is something I've wanted in Livewire for a while. A few years ago, this package was released, but as you can see by the latest release, it didn't really go anywhere. I'm unsure if the native Livewire implementation uses any of that code, but it's nice to drop an extra dependency!

Easier Placeholders

I'm a big fan of Livewire placeholders. Being able to show something when your actual data is loading in is a massive UI win. That said, Livewire 4 adds a new @placeholder directive, which allows you to define them in the component, without defining new views, classes and methods.

Livewire 4 adds a lot more, but I wanted to focus on the things I care most about! I'm really excited to see what's in store for Livewire 5!