Laravel Livewire Beta v3 has been released

Caleb Porzio live on stage at Laracon released the official Laravel v3 Beta versions with many cool and amazing features. Let’s have a look at them.

Prerequisites

Before we start, make sure you have the following installed:

• Laravel version 9 or later
• PHP version 8.1 or later

Install Livewire

From the root directory of your Laravel app, run the following Composer command:

composer require livewire/livewire "^3.0@beta"

This will install the v3 Beta version of Laravel Livewire.

What’s New?

Automatically injected assets

In v3, Livewire automatically injects its styles, scripts, and Alpine. There’s no need to add <livewire:styles /> and <livewire:scripts /> or load Alpine in your projects anymore!

New default namespace

By default, v3 uses the App\Livewire namespace (and app/Livewire directory) instead of App\Http\Livewire now. There's a configuration option to keep the old namespace if you prefer that.

Reactive properties

Coming from frontend frameworks like React and Vue, some Livewire users automatically assumed properties they passed into nested components would be reactive to changes in the parent. Due to some limitations in v2, that wasn’t actually possible. We had to rely on events or other workarounds to sync nested components. v3 adds support for “reactive” props. It’s as simple as adding a #[Reactive] PHP attribute to the property in your component class.

<?php
 
// ...
use Livewire\Attributes\Reactive; 
 
class InvoiceItem extends Component
{
    #[Reactive] 
    public $item;
}

Form objects

Form objects are a new concept that can help keep component classes clean by abstracting away some of the form-specific code. You may want to put a component’s form properties, validation, saving functionality, and more on form objects.

Here’s a small example, but I’d recommend reading the documentation for a full list of the features!

<?php
 
namespace App\Livewire\Forms;
 
use Livewire\Form;
 
class UserForm extends Form
{
    #[Rule('required')]
    public $name = '';
 
    #[Rule(['required', 'email'])]
    public $email = '';
}

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
use App\Models\Post;
use App\Livewire\Forms\UserForm;
 
class UpdateProfile extends Component
{
    public UserForm $form;
 
    public function save()
    {
        auth()->user()->update(
            $this->form->all()
        );
 
        return $this->redirect('/profile');
    }
 
    public function render()
    {
        return view('livewire.update-profile');
    }
}

<form wire:submit="save">
    <input type="text" wire:model="form.name">
    <div>
        @error('form.name')
            <span class="error">{{ $message }}</span>
        @enderror
    </div>
 
    <input type="email" wire:model="form.email">
    <div>
        @error('form.email')
            <span class="error">{{ $message }}</span>
        @enderror
    </div>
 
    <button type="submit">Save</button>
</form>

wire:navigate (SPA mode)

Another new addition is wire:navigate. When using full-page Livewire components, you may now add the wire:navigate attribute to your links to enable a SPA-like experience. Instead of doing a full-page load, Livewire will add a loading indicator to the top of the page, fetch the contents of the new page in the background, then intelligently swap out the HTML on the page. The feature also supports prefetching and redirects and enables the ability for persisted elements.

<a href="/profile" wire:navigate>Profile</a>

There are a ton of new features that are added to Laravel. You can view its documentation here. Happy Coding Fellas.