【Nuxt.js】「The client-side rendered virtual DOM tree is not matching ...」エラーを解決する

あきぞらです。

nuxt.jsを使っていて、開発途中でChromeのコンソールにエラーがでていることに気がつきました。

みると、こんなメッセージが。

vue.runtime.esm.js?2b0e:619 [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.

クライアントとサーバのDOMがマッチしない・・？

と全く見当がつかないまま、調べていると、解決方法が。

nuxt.config.jsを確認すると、 ssr: false という設定に。

plugins: [
  { src: '@/plugins/axios/index'},
  { src: '~/plugins/vue-awesome-swiper', ssr: false }
],

これではSSR（サーバサイドレンダリング）しない設定となり、上記のエラーが発生します。

コピペして使ってたのが良くなかったようです。

このssr: false を外せば解決しました。

コピペは気を付けよう。