アップデート
公式ドキュメント通り
sail composer require livewire/livewire "^3.0"
として
sail artisan livewire:upgrade
とする。この時の選択肢は全てデフォルトで回答。
これで満を持して元プロジェクトのlivewireの動作を確認しようとしたが、全然動かない。チュートリアルにある一番シンプルなカウンターすら動かない。色々試行錯誤しているとconsoleに
Livewire: The published Livewire assets are out of date
See: https://livewire.laravel.com/docs/installation#publishing-livewires-frontend-assets
というwarningが出ているのに気づいたので
sail artisan livewire:publish --assets
としてみたらpublic/vendor/livewire以下に色々なファイルが自動生成され、結果的に動いた。でもドキュメントを見てみると、assetをpublishするやり方は標準じゃないとのこと。なんで動かないのか理解するのに丸一日かかった。
解決策
よく見たら、アップデートする前からpublic/vendor/livewireというフォルダがあって、それがLivewire 2ベースなのが問題だった。そもそもなんでこんなものがあるのかよくわからないが、何かのタイミングで作ったんだろう。これがあるのがいけないので
rm -rf public/vendor/livewire
とした。Alpineが重複するのでresources/js/app.jsの中身からAlpineの記載を削除して、
npm uninstall alpinejs
としたら動いた。
Alpineだけを使いたい場合
Livewireを使うページでは自動的にAlpineがバンドルされるが、そうでないページでAlpine単独で使いたい場合は
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
のようにしないといけない。公式ページにちゃんと書いてあった。