CODEWITHSUNDEEP
vue.jsnuxt.js
Eide
Eide

Reputation: 5

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?

Upvotes: 0

Views: 4295

Answers (3)

Mohammadreza Khalilikhorram
Mohammadreza Khalilikhorram

Reputation: 470

In NuxtJS 3 document written:

The to target of <Teleport> expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to body only, with client-side support for other targets using a <ClientOnly> wrapper.

Upvotes: 0

Nikochin
Nikochin

Reputation: 11

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>

Upvotes: 1

Jacob Bradley
Jacob Bradley

Reputation: 92

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.

Upvotes: 3

Related Questions