<Teleport>

O componente <Teleport> teleporta um componente para um local diferente no DOM.

O alvo to de <Teleport> espera uma string de seletor CSS ou um nó DOM real. Atualmente, o Nuxt tem suporte SSR para teleports apenas para #teleports, com suporte no lado do cliente para outros alvos usando um wrapper <ClientOnly>.

Teleport para o Corpo

<template>
  <button @click="open = true">
    Abrir Modal
  </button>
  <Teleport to="#teleports">
    <div v-if="open" class="modal">
      <p>Olá do modal!</p>
      <button @click="open = false">
        Fechar
      </button>
    </div>
  </Teleport>
</template>

Teleport no Lado do Cliente

<template>
  <ClientOnly>
    <Teleport to="#some-selector">
      <!-- conteúdo -->
    </Teleport>
  </ClientOnly>
</template>

Editar e visualizar o código de exemploexamples > advanced > teleport

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/api/components/teleports