今回行った対策

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"