概要
現状(livewire2.x)は、Alpine.jsと依存関係はありません。
連携させるには別途Alpine.jsを読み込み、@entangleディレクティブや$wireAPIなどを使用する必要があります
livewireインストールすだけでAlpine.jsがついてくる
今まではLivewire スクリプト、スタイル、Alpine.jsを読み込んでいましたが、記述が不要になります
<!DOCTYPE html>
<html lang="en">
<head>
- <script src="//unpkg.com/alpinejs" defer></script>
- @livewireStyles
- @livewireScripts
</head>
<body>
...
</body>
</html>
livewireの記述でAlpine.jsのトランジションを使用できる
wire:transition
Alpineには以前からトランジションがありましたが、Livewire v3では、wire:transitionというx-transitionのラッパーが追加されます。Wire:transitionをLivewireで表示・非表示される要素に追加すると、とても美しいトランジションが得られます。wire:transition は x-transition を利用しているので、.opacity や .duration などのモディファイアもすべてサポートされます。
その他
- エディターでファイルを保存するだけで画面のリロードが不要になる
- wire:modelの挙動が変わる
| リクエストタイミング | 2.x | 3.x |
|---|---|---|
| 要素の「入力」イベントを検知して同期 | wire:model |
wire:model.live |
| submitやlivewireイベント時に同期 | wire:model.defer |
wire:model |
- 親子関係にあるコンポーネント内のプロパティの同期等が簡単に
- wire:navigateでSPAっぽく実装が可能に