Client-side rendered virtual DOM tree mismatching server-rendered content


I’m displaying an element in my component depending on a store state value. Getting this error:

[Vue warn]: The client-side rendered virtual DOM tree is not matching
server-rendered content.

What am I doing wrong?

Component:

<template>
  <div v-if="open">
    ...
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      open: state => state.dropdown?.open ?? false
    })
  }
}
</script>

Store:

export const state = () => ({
  open: false
})

Source: Vue – Stack Overflow

November 27, 2021
Category : News
Tags: nuxt.js | Vue.js | vuex

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.