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


[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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Method 1: wrap your component by <no-ssr></no-ssr>

<template>
  <div >
    <Navbar />
    <div class="container">
        <no-ssr>        
        <div v-if="chartOptions.series[0].data.length">
        <highchart :options="chartOptions" />
        </div>
        </no-ssr>
    </div>
</div>  
</template>

Method 2: wrap your component by <client-only></client-only>

For NuxtJS version > v2.9.0

<template>
  <div >
    <Navbar />
    <div class="container">
        <client-only>        
        <div v-if="chartOptions.series[0].data.length">
        <highchart :options="chartOptions" />
        </div>
        </client-only>
    </div>
</div>  
</template>

Recent search terms:

  • 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 <p> or missing <tbody> Bailing hydration and performing full clien

Leave a Reply