Search code examples
vue.jsnuxt.js

Vue <teleport> in Nuxt

While designing client-rendering SPA, <teleport to="body"> of Vue3 works well. I can teleport dialog component to <body>.

<--! dialog component example-->

<template>
  <teleport to="body">
    <div class="dialog">
      <slot></slot>
    </div>
  </teleport>
</template>

However, it's failed when I try to use the same way in Nuxt static mode.

Does Nuxt support "teleport" method?

Is there any other workaround dealing with teleport in Nuxt static application?

Solution

  • Portals/Teleport arrived with Vue 3. This is not yet supported in Nuxt, as it is still running on v2. If necessary, you can likely find alternative third party packages for this in the meantime.