Nuxt中的Vue <teleport>

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>。大多数情况下，我们只需要渲染模式在客户端 (没有SSR)无论如何。

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