今回行った対策
- ViewTransitionsとvueの併用は諦める
※併用できる方法は調査中。時間なくて、、、。
※下記、メモ程度しか書いていないので、飛ばしていいです。
経緯
astroを用いたwebサイトを作成しています(趣味で)。
最初はastroのみで作成していましたが、機能を実装しようとした際にjavascriptを真面目に組むのが面倒になり、vueを実装しました(縋り付きました)。
この時点でページ切り替えにViewTransitionsを実装していました。
vueの実装を終えて走らせてみると、、、
下記のエラーが発生しました。
Uncaught ReferenceError: app is not defined at element.addEventListener.once
解決までの糸口
(続き。)正直、ここでエラーが起きるとは予想をしておらず、まいっていました。
chat GPT君に質問すると、コンポーネントにclient:only="vue"を付けると良いよ！と、提案されたので実装。初回表示したページは何も起きなくなりました。しかし、ページを遷移するとエラーが発生。あ？なんじゃおら！とやけになりchat GPT君にチャットしまくり、様々な質問方法を試してみましたが、大体同じclient:only="vue"の解答ばかりでした。
途方に暮れている時に、ふと"不要そうなコードを全て取り除こう！"と言う気分になり実践。
すると急にエラーが無くなり動く動く。おや？と思い原因箇所を特定していくと、ViewTransitionsの行でした(ここをコメントアウトすると動く事が分かりました)。
<head prefix="og: https://ogp.me/ns#">
~省略~
<!-- ここ -->
<!-- <ViewTransitions/> -->
~省略~
<head>
自己解釈
真面目に調べていないです。憶測で、ViewTransitionsはおそらく前の画面のDOMを残してアニメーション切り替えしているのでしょう(？)。その際に、前のDOMと干渉が起きてエラーをはいているのだろうと推測しています。Astroはレンダリングをサーバー側で済ませてしまうので(SSR)、画面を切り替えた時に#appがどこかに行ってしまうのかな。きっとそう。
若しくはAstro君は優秀で、不要なjavascriptを取り除いてしまう処理になっています。これも何か関係しているのでしょうか。
はぁ。もっと勉強しないと。。。
実装イメージ
今回の実装は、templateLayout.astroにViewTransitionsを実装しており、このコンポーネントを起点にslotにて、vueコンポーネントを呼び出す実装にしました。
//page1のイメージ
<templateLayout>
<!-- slotで挿入 -->
<vueのコンポーネント />
</templateLayout>
↑ここの切り替え時に何かが起きている↓
//page2のイメージ
<templateLayout>
<!-- slotで挿入 -->
<vueのコンポーネント />
</templateLayout>
バージョン情報
メモ程度にpackage.jsonの中身を載せて置く。
"@astrojs/vue": "^4.5.1",
"astro": "^4.4.2",
"astro-imagetools": "^0.9.0",
~省略~
"vue": "^3.5.9"