Teleport

Source
此示例展示了如何在客户端渲染和服务器端渲染中使用 <Teleport>。
app.vue
Open docs
<template>
  <NuxtExample dir="advanced/teleport">
    <div>
      <!-- SSR Teleport -->
      <Teleport to="#teleports">
        <UContainer>
          <UAlert
            class="mt-8"
            icon="i-heroicons-server-stack"
            title="SSR Teleport"
            description="Hello from Server-side teleport!"
          />
        </UContainer>
      </Teleport>

      <!-- Client Teleport -->
      <ClientOnly>
        <Teleport to="#teleports">
          <UContainer>
            <UAlert
              class="mb-8"
              icon="i-heroicons-window"
              title="Client Teleport"
              description="Hello from Client-side teleport!"
            />
          </UContainer>
        </Teleport>
      </ClientOnly>

      <!-- Modal Example -->
      <MyModal title="Teleport Modal">
        Hello from Modal teleport!
      </MyModal>
    </div>
  </NuxtExample>
</template>
https://teleport.example.nuxt.space

Vue 3 提供了 <Teleport> 组件，它允许内容在 DOM 中的其他位置渲染，位于 Vue 应用之外。

此示例展示了如何在客户端渲染和服务器端渲染中使用 <Teleport>。

在 Docs > API > Components > Teleports 中查看详情