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

2305 ワード
ssr Vue.js Vuetify nuxt Vue.js テキストリンク

現象


SSRでVuetifyのDatePickerを使用したら
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
というエラーが発生

解決策

調べてみると tableにtbodyを入れると解決するとのこと。
https://qiita.com/k5690033/items/d1e436fd3b92fcc1fe61

しかし今回はコンポーネントを丸ごと使用しているためこれができない。

no-ssrを使う

DatePickerに関してはssrする必要がそもそもないので no-ssr で囲って解決した。
https://github.com/nuxt/nuxt.js/issues/1700


    <no-ssr>
      <v-date-picker
        v-model="picker"
        :landscape="landscape"
        :reactive="reactive"
        :full-width="fullWidth"
        :show-current="showCurrent"
        :type="month ? 'month' : 'date'"
        :multiple="multiple"
        :readonly="readonly"
        :disabled="disabled"
        :events="enableEvents ? functionEvents : null"
      ></v-date-picker>
    </no-ssr>