Nuxt.js error: The client-side rendered virtual DOM tree is not matching server-rendered content
Nuxt.jsで表示するコンポーネントをv-ifで切り替える処理で、タイトルの様なエラーが出ていてものすごくハマった。
親コンポーネントのコード(必要最低限のみ)
code: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>で囲ったら直った
code:parent.vue
<template>
<no-ssr>
<Component1 v-if="isPc" /> <!-- アウト!!! -->
<Component1 v-else />
</no-ssr>
</template>