Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

Question

I am using Nuxt.js / Vuejs for mmy app, and I keep facing this error in different places:

    The client-side rendered virtual DOM tree is not matching serve         


        

Answer 1

This error can be really painfull to debug. In order to quickly get the element causing an issue edit node_modules/vue/dist/vue.esm.js and add the following lines :

// Search for this line: 
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
    var i;
    var tag = vnode.tag;
    var data = vnode.data;
    var children = vnode.children;
    inVPre = inVPre || (data && data.pre);
    vnode.elm = elm;

    // Add the following lines: 
    console.log('elm', elm)
    console.log('vnode', vnode)
    console.log('inVpre', inVPre)
    // ...

You will get in the console the failing node.