nuxt-linkで遷移した場合には問題ないのですが

リロードやURLを直接叩いた場合に以下のようなエラーが発生します

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.appendChild

原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。

特にv-ifを利用するとほぼ発生するように思います

その場合、v-ifの前後や、場合によってはコード全てを

<client-only></client-only>

で囲えば発生しなくなります

ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますので

その辺りはご注意ください

参考:

【Vuetify】NuxtのSSRでVuetifyのDatePickerを使用したら「The client-side rendered virtual DOM tree is not matching server-rendered content. 」というエラー発生 – Qiita

Receive the latest news in your email
Table of content
Related articles