Vue <teleport> 在 Nuxt

Question

在设计客户端渲染 SPA 时，Vue3 的 效果很好。 我可以将对话框组件传送到 。

<--! dialog component example-->

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

但是，当我尝试在Nuxt静态模式下使用相同的方式时，却失败了。

Nuxt支持“传送”方法吗？

在 Nuxt 静态应用程序中还有其他处理传送的解决方法吗？

Answer 1

Portals/Teleport 随 Vue 3 一起到来。Nuxt 尚不支持此功能，因为它仍在 v2 上运行。如果有必要，您可以同时找到替代的第三方软件包。

Answer 2

我可能会误解你在寻找什么，但一种解决方案是使用

<ClientOnly>

。大多数时候我们只需要在客户端渲染Modal（无需SSR）。

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

Answer 3

在NuxtJS 3文档中编写：

<Teleport>

的 to 目标需要一个

CSS

选择器字符串或实际的

DOM

节点。 Nuxt 目前仅支持传送到

body

的 SSR，并使用

client-side

包装器为其他目标提供

<ClientOnly>

支持。