Nuxt.js: [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.

[SaranyaPalanivel]

In Nuxt, if I try to add third party plugin for example vue-date-picker like this

<template>
   <div>
       <datepicker :readonly="true" format="YYYY-MM-DD"></datepicker>
    </div>
</template>




<script>
let datepicker = null
// The server-side needs a full url to works
if (process.browser) {
  datepicker = require('vue-date-picker').default
}


export default {
  components: {datepicker}
}
</script>

DatePicker works perfectly. But the following warning occurs

[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.

How to get rid of it?

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

[homerjam]

You could try wrapping the component with <no-ssr/>, or moving all dom manipulations to the mounted lifecycle hook.

[SaranyaPalanivel]

@homerjam <no-ssr/> works fine....Thanks

[vuchl]

@Atinux @alexchopin The <no-ssr> component should be getting some attention in the documentation.

[lomholdt]

Wow! <no-ssr> works great! Had no idea that was a thing. Thanks!

[levy9527]

by the way, when use element-ui as plugin, remember setting ssr: true

[thomijasir]

i try in my costume component it was great there no errors but the component not working properly? why?

[Arima-s]

@homerjam perfect! Thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.