Vue Warn the client side rendered virtual DOM tree is not matching server-rendered content

Question

I'm trying to loop a tr within a table with Vue.js and Nuxt. But when I load the page I get the following error

vue.runtime.esm.js?2b0e:619 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing . Bailing hydration and performing full client-side render.

When I remove the table from the following block of code from my HTML the error disappears. How can this be happening? I checked all closing tags and they seem to be matching. What is happening here?

In Template

<template>
  <ContentBlock id="statistics" class="content-light"> 
      <div class="content-grid-light">
          <div class="content-grid-item-1">
              <div>
                  <table class="table">
                      <tr v-for="(statistic, index) in statistics" :key="index" :value="statistic">
                        <th class="table-cell">{{statistic.key}}</th>
                        <td class="table-cell statistic-value">{{statistic.value}}</td>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
  </ContentBlock>
</template>

In Script

  data(){
    return{
      statistics: [
        {key:"TestKey1", value:"TestValue1"},
        {key:"TestKey2", value:"TestValue2"},
        {key:"TestKey3", value:"TestValue3"},
        {key:"TestKey4", value:"TestValue4"},
      ],
    }
  },

Here is my rendered html

Html

Shadi Farzankia · Answer 1 · 2020-01-28T14:58:05.800

3

The answer depends on the version of your nuxt project. If the version is v<2.9.0, wrap your table with no-ssr tag. Otherwise use client-only tag like below:

version < 2.9.0:

<no-ssr>
   <table></table>
</no-ssr>

version > 2.9.0

<client-only>
  <table></table>
</client-only>

Tip: pay attention that no-ssr is going to be removed in nuxt 3.

edited Jan 28 '20 at 14:58

answered Jan 28 '20 at 14:12

Shadi Farzankia

639
8
21

this won't work If you are using a version of Nuxt < v2.9.0, in that case use – Awais fiaz Jan 28 '20 at 14:27
is going to be removed in Nuxt 3. – Shadi Farzankia Jan 28 '20 at 14:30
so Im going to edit my answer according to the version – Shadi Farzankia Jan 28 '20 at 14:31
That just disables SSR – kovan Jan 11 '21 at 09:13

score 2 · Answer 2 · answered Jan 28 '20 at 14:17

2

Marvin Rudolph helped me out on the Nuxt discord. I needed to add a tbody around my tr and the error was gone

answered Jan 28 '20 at 14:17

OneDayFly

81
1
9

score 0 · Answer 3 · answered Jan 28 '20 at 12:30

make sure to wrap your component markup with a template/container no other element should be outside the template/container. for example:

<template>
   <div id="app">
     <table class="table">
      <tr v-for="(statistic, index) in statistics" :key="index" :value="statistic">
        <th class="table-cell">{{statistic.key}}</th>
        <td class="table-cell statistic-value">{{statistic.value}}</td>
      </tr>
     </table>
   </div>
</template>

no element should be outside the #app tag

I have that. I only gave the table part because that seemed relevant. But I added the full template. And I get the error with that. — OneDayFly, Jan 28 '20 at 12:43

Awais fiaz · Answer 4 · 2020-01-28T13:01:22.273

0

The object you are trying to loop over is not correct as it should be for a v-for the rendered html shows [object Object] as value of each tag, try this instead

<template>
  <ContentBlock id="statistics" class="content-light"> 
      <div class="content-grid-light">
          <div class="content-grid-item-1">
              <div>
                  <table class="table">
                      <tr v-for="(statistic, index) in statistics" :key="statistic.key" :value="statistic.value">
                         <th class="table-cell">{{statistic.key}}</th>
                         <td class="table-cell statistic-value">{{statistic.value}}</td>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
  </ContentBlock>
</template>

if this does not solves the problem you can use the tag as suggested here

edited Jan 28 '20 at 13:01

answered Jan 28 '20 at 12:43

Awais fiaz

351
1
5
20

But I want this to be server side rendered. Why couldn't it be? – OneDayFly Jan 28 '20 at 12:49
@OneDayFly the object you are trying to loop over is not correct as it should be for a `v-for` the rendered html shows [object Object] as value of each `` tag – Awais fiaz Jan 28 '20 at 12:55
I want it to be server side rendered or have a good reason why it couldn't be done. – OneDayFly Jan 28 '20 at 13:08
@OneDayFly answer is updated please check now everything will be server side rendered – Awais fiaz Jan 28 '20 at 13:09
Here is the rendered html https://snipboard.io/CtE4Nr.jpg that still generates the error – OneDayFly Jan 28 '20 at 13:12
seems like a data issue in object for testKey6 how can the value be testValue7 ? [Screenshot](https://snipboard.io/ykFtn7.jpg) – Awais fiaz Jan 28 '20 at 13:17
No just a typo sorry also I added more test data. The data checks out! – OneDayFly Jan 28 '20 at 13:22

Vue Warn the client side rendered virtual DOM tree is not matching server-rendered content

4 Answers4

Linked