Alpine.jsはLivewireと連携できるメソッドが用意されている
Alpine.jsとLivewireは同じ開発者(Caleb Porzio氏)らしく、ゆえにAlpine.jsにはLivewireに適したライブラリとなっています。
あと、Livewireのドキュメントにも「Livewireを使う開発者ならAlpine.js使っとるよなぁ?(意訳)」と書いてます。
引用元:https://readouble.com/laravel/9.x/ja/frontend.html
トッピングって言い方カワイイ
メソッド・プロパティの例
①$wire
引用元:https://readouble.com/livewire/2.x/ja/alpine-js.html
Livewire側で定義したメソッドを使える。クリックイベントと一緒に使ったらAlpine.jsのx-on:clickでLivewireのメソッドを呼び出せる。
(必要かどうかはワカランティウスㄟ( ・ө・ )ㄏ)
②@entagle
引用元:https://readouble.com/livewire/2.x/ja/alpine-js.html
Livewire側で定義したプロパティが使える。
これは便利かも。
使用する場面としては、Livewire側でデータを更新したあとにそのデータを受け取る時に使えそう。
その他Alpine.jsを使う理由
①Vueみたいにフロントエンド全般を作るライブラリは流石に過剰な気がする
Livewireがデータ取得や更新を行ってくれるので、Alpine.jsはBladeファイルのDOM操作のために使うのが役割として合ってます。
なので、Vueみたいにフロントエンド全般を作るライブラリは流石に過剰だと思いまぴた。
②てかVue使うならLivewire使わんのでは
Vue × Livewireの組み合わせなんてのは公式ドキュメントには書いて無さそうだ。
むしろVue使うなら「Vue × InertiaがLaravelとVueを活かせてめちゃヨシ子!!」と公式ドキュメントに書いております。
↓↓↓
引用元:https://readouble.com/laravel/9.x/ja/frontend.html
1個目で述べたけどやっぱりVueとLivewireは役割が被ってるとこあるっぽいからそもそもVueは使わなさそうです。
2人は互いに交じり合わないねじれの位置にいるってワケ。
(ヲタクとアイドル的な。)
まとめ
Livewire使うならAlpine.jsを使おう。
もしVue,React使うならInertiaを使おう。