Laravel Jetstream with Livewire 3
Published: 2023-08-06 23:25:54

The [Livewire 3](https://livewire.laravel.com/) 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](https://jetstream.laravel.com/introduction.html) instead of [Breeze](https://laravel.com/docs/10.x/starter-kits#laravel-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).

```shell
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.

```shell
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.

```shell
php artisan livewire:publish --config
```

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

![Laravel Jetsteam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jev27b2uxvwnlueuh2qn.png)

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](https://laracasts.com/discuss/channels/livewire/when-jetstream-update-to-use-livewire-v3?page=1&replyId=899665) 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`).

```php
...

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()`](https://livewire.laravel.com/docs/upgrading#thison-deprecated) has been deprecated. We’ll need to replace it with `x-on`.

```php
// 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](https://livewire.laravel.com/docs/installation) and [upgrade](https://livewire.laravel.com/docs/upgrading) docs.