Update Livewire and Alpine.js V3 on Laravel Jetstream.

upgrade-alpine-v3.md

Step 1

Set to at least v3.0.6 and make sure Livewire is updated to v2.5.0

Run artisan vendor:publish --force --tag=livewire:assets --ansi to publish new assets.

Ignore if you have set auto publish at the composer's post-autoload-dump section.

Update the Alpine.js version.

// package.json
- "alpinejs": "^2.7.3",
+ "alpinejs": "^3.0.6",

Run yarn install or npm install to update the dependencies.

Step 2

New Alpine initialization.

// resources/js/app.js
- require('alpinejs');
+ import Alpine from "alpinejs";

+ window.Alpine = Alpine;

+ Alpine.start();

Step 3

// resources/views/vendor/jetstream/components/action-message.blade.php
- x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
- x-show.transition.opacity.out.duration.1500ms="shown"
+ x-init="$nextTick(() => @this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  }))"
+ x-show="shown"
+ x-transition.opacity.out.duration.1500ms

Step 4

// resources/views/vendor/jetstream/components/dropdown.blade.php
- <div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
+ <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">

Thanks for sharing!