[Vue]HTMLに問題はないはずなのにエラーが出てしまいます[Nuxt.js]

Question

前提・実現したいこと

Nuxt.js初学者です。
技術書を見ながらブログアプリのようなものを作っているのですが

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.

というエラーが出てしまい解消できないという状況に陥っています。

該当のソースコード

**TheHeader.Vue**

<template>
<client-only>
  <el-menu mode="horizontal" :router="true">
    <el-menu-item index="1" style="pointer-events:none;">
      Nuxt Diary App
    </el-menu-item>
    <el-menu-item index="2" :route="{ path: '/posts/' }">
      投稿一覧
    </el-menu-item>

    
      <el-menu-item index="4" style="float: right;" :route="{ path: `/users/${user.id}` }" v-if="user">
        <span>{{user.id}}</span>
      </el-menu-item>
      <el-menu-item index="4" style="float: right;" :route="{ path: '/' }" v-else>
        <span>ログイン</span>
      </el-menu-item>
    
    <el-menu-item index="5" style="float: right" :route="{ path: '/posts/new' }">
      新規投稿
    </el-menu-item>
  </el-menu>
  </client-only>
</template>



<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['user'])
  }
}
</script>

試したこと

上記エラー文にもある通りpタグやtbodyタグなどのタグの付け忘れ（過不足）で起こるエラーのようなので自分の書いたコードを見返し、サンプルコードと比較してみたりもしたのですが問題は見当たりませんでした。

このエラーの解消法をご存じの方がいらっしゃいましたらアドバイスお願いします。

Comments

[plasticgrammer]

no-ssr の範囲を広げるとどうなるのでしょうか？（el-menu全体とか）

[jime1234567]

ご質問いただきありがとうございます。
no-ssrの範囲を広げてみましたがエラーは解消されませんでした。

Answer 1

回答

<no-ssr></no-ssr>を<client-only></client-only>に変えてみてください。

補足

Nuxtのバージョンがv2.9.0以上の場合は<client-only></client-only>を使用し、未満の場合は<no-ssr></no-ssr>を使用します。
こちらを参照するといいと思います。

バージョンによって使えるものと使えないものがあるので、技術書で使われているNuxtのバージョンと合わせて学習なされた方が良いかと思います。

Comments

[jime1234567]

ご回答いただきありがとうございます。
Nuxtのバージョンを確認したところ2.14.7でしたのでアドバイスいただいた通りclient-onlyに変えてみたのですがエラーは解消されませんでした。

[Ryota_Fukumoto]

以下を試してみて欲しいです。
1. client-onlyを付けないとどうなりますか？
2. v-ifをv-showに変えるとどうなりますか？

[jime1234567]

1を試した結果
[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.
のエラーがもうひとつ出るようになりました。

2を試した結果
Errors compiling template:
v-else used on element <el-menu-item> without corresponding v-if.
というエラーが出ました。

[Ryota_Fukumoto]

v-showにはv-elseが使えません。
v-ifをv-show="user"にした場合は、v-elseをv-show="!user"にしてください。

[jime1234567]

v-ifをv-show="user"にし、v-elseをv-show="!user"にした結果、1と同じように
[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.
のエラーがもうひとつ出るようになりました。

[Ryota_Fukumoto]

すみません。原因がわかりません。もしかしたら他のところが原因かもしれませんね。
Teratailのルール的に良いかわからないのですが、GitHubなどで全体のソースコードを共有していただければ、見ます。

[jime1234567]

下記がgithubのURLです
https://github.com/jime2514/footballer-app.git
お手数をおかけしますがよろしくお願いいします。

[Ryota_Fukumoto]

cloneして動かしてみましたが、私の環境ではエラーが発生しませんでした。
とりあえず、再度npm installを実行してみたり、gitから新しくcloneしてみてください。

[jime1234567]

gitから新しくクローンしたところ解決しました。

ありがとうございました。