Laravel Jetstream with Livewire 3

The Livewire 3 beta was released live on stage by Caleb Porzio just a few weeks back at Laracon US, and since then, I’ve wanted to give it a try.

To get started, I setup a new Laravel application and used a starter kit. I chose Jetstream instead of Breeze, mainly because I haven’t used Jetstream previously and wanted to give it a try, however, these steps should apply to Breeze as well.

Once you’ve followed the docs and have Jetstream setup, we’ll need to upgrade to Livewire 3 (at the time of this post, Jetstream still uses Livewire 2).

composer require livewire/livewire:^3.0@beta

Since I was using a fresh install of Jetstream, I decided to give Livewire 3’s auto-updater a try since I only had the default Livewire components.

php artisan livewire:upgrade

This provides a list of questions asking about various upgrade options. I just answered with the default responses for all of them.

After the questions, the next step is to publish the config file.

php artisan livewire:publish --config

With that in place, Livewire v3 is mostly setup with Jetstream!

Basic actions like logging in work, however, when running the tests, with php artisan test, you’ll notice a few failing tests.

Thanks to Corridor Mario for pointing out this post which discusses the additional changes that need to be made to get passing tests.

First, since Livewire v3 replaced the emit and dispatchBrowserEvent methods with a single $dispatch method, we’ll need to handle that. Unfortunately, the files where these are used are part of the Jetstream package, so we cannot easily modify them. The best way for now is to create macros in your AppServiceProvider file (/app/Providers/AppServiceProvider).

...

use Livewire\Component;

...

public function boot(): void
{
    Component::macro('emit', function ($event) {
        $this->dispatch($event);
    });

    Component::macro('dispatchBrowserEvent', function ($event) {
        $this->dispatch($event);
    });
} 

Finally, we’ll need to modify the action-message.blade.php file (resources/views/components/action-message.blade.php). Per the Livewire docs, @this.on() has been deprecated. We’ll need to replace it with x-on.

// Replace

<div 
    x-data="{ shown: false, timeout: null }"
    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
    ...
</div>


// With

<div 
    x-data="{ shown: false, timeout: null }"
    x-on:{{ $on }}.window="clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);"
    ...
</div>

Once that change has been made, the tests should now be passing.

Based on the changes that we needed to make above, I think Livewire 3 and Jetstream are great to use for learning, however, I’m not sure I would recommend it for a production application just yet. Once Livewire 3 is out of beta, Jetstream will likely be updated shortly after, though.

Note that since the Livewire 3 beta is still being updated, additional issues can occur with this installation. The latest version removed some of the steps that were originally needed, however, it introduced some issues with asserting the status of Livewire components.

For more advanced installations, follow the Livewire install and upgrade docs.