Static GitHub Issues

[1497] Got an hydration error when use vue-portal

prev: After updating to `latest` scroll binding stopped working
next: vue-fullpage window is not defined

Hello. I got an error when trying to use with Nuxt

vue.runtime.esm.js:430 [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.

I have Modal component, that I want to render outside of component, where I am calling modal.

I have this:

This is where I want to render Modal component:

<template lang="pug">
  div
    my-header
    .flex-sticky
      nuxt.content
      my-footer
    portal-target(name="destination")
</template>

This is where I am calling Modal component

<template lang="pug">
div
    portal(to="destination")
        modal
</template>

Sorry for Pug. If needed, I rewrite it with HTML. Please assist me to fix this issue with this awesome library. Is it compatible with Nuxt?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1333">#c1333</a>)</em></sub></div>