Closed1

Nuxt.js error: The client-side rendered virtual DOM tree is not matching server-rendered content

high-ghigh-g

Nuxt.jsで表示するコンポーネントをv-ifで切り替える処理で、タイトルの様なエラーが出ていてものすごくハマった。

親コンポーネントのコード（必要最低限のみ）
parent.vue

<template>
  <Component1 v-if="isPc" /> <!-- アウト！！！ -->
  <Component1 v-else />
</template>

<script>
import { mapState } from 'vuex'
import Component1 from '@/components/component1'
import Component2 from '@/components/component2'
 
export default {
  // 省略
  computed: mapState({
    isPC(state) {
      return state.◯◯◯.△△ === 'pc'
    }
  })
}
</script>

上記のコードのcomputedで記述しているようなVuexのstateの値をコンポーネントを切り替える値に使ってしまうと、タイトルのようなエラーがでた・・・。

該当箇所を<no-ssr></no-ssr>で囲ったら直った
parent.vue

  <template>
  	<no-ssr>
  		<Component1 v-if="isPc" /> <!-- アウト！！！ -->
  		<Component1 v-else />
  	</no-ssr>
  </template>
このスクラップは2022/09/15にクローズされました