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

Created on 27 Feb 2017 · 6Comments · Source: nuxt/nuxt.js

As stated in the topic，

<ul class="menu">
  ...
</ul>

the code will result in "Mismatching childNodes vs. VNodes"

But when I change the 'class' attr for other like "class='menus'" and "class='men'", as long as it's not 'menu', it works well

<ul class="menus">
  ...
</ul>
// or
<ul class="men">
  ...
</ul>

The error information is as follows

error

_{This question is available on Nuxt.js community (#c278)}

Source

jo0ger

Most helpful comment

Check for v-if="async content" and if you don't have that in your client because that async condition didn't resolve but markup will be present in the server. Change to v-show to see if it works.Worked for me

SarasArya on 17 Oct 2017

👍6 🎉4 😄3

All 6 comments

This issue is not related to Nuxt.
Can you explain more about your code?

alexchopin on 27 Feb 2017

👎2

I had similar issue with the same error message in a menu. I iterated on items from an object stored in vuex that had a method returning an array. This method was not populated by nuxt, so I had menuitems in the server-rendering but not in the client-rendering.

Storing objects with functionality in vuex maybe a bad idea when using nuxt or may in general.

toyflish on 9 Apr 2017

Had the similar issue. There was a button which was a nuxt-link with - by default - attribute type="button". This type was the problem. Removed type attribute and it's fine. So, check out the rules for this HTML element.