ブラウザのコンソールにでてくるこの謎の警告の対応方法です。チームで開発してたりするといつのまにか出るようになってたりでけっこう厄介です。
[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.対処方法
検索するとpタグの中が空だったりtableの中にtbodyが無いとか<no-ssr>タグを使ってみろとか色々でてきます。
私の場合は無駄にプラグインがssr: falseで宣言されていたのが原因でした。。。nuxt.configのpluginの定義を治すことで解決しました。
これを
{ src: '~/plugins/message-area.js', ssr: false },
これに
{ src: '~/plugins/message-area.js' },たぶんplugin作った人がよくわからずにコピペ作ったんだろうなぁ
