Home

Issue: 1497

Got an hydration error when use vue-portal

[issue link]

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?

This question is available on Nuxt.js community (#c1333)