'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?

vue.jsnuxt.js


Solution 1:[1]

I may misunderstand what you're looking for but one solution is using <ClientOnly>. Most of the time we only need to render Modal in client-side (without SSR) anyway.

<template>
  <div class="modal_container">
    <ClientOnly>
      <Teleport to="body">
        <div class="modal">
          Hello World
        </div>
      </Teleport>
    </ClientOnly>
  </div>
</template>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nikochin

Related Questions