<Teleport>
El componente <Teleport> teletransporta un componente a una ubicación diferente en el DOM.
El destino to de <Teleport> espera una cadena de selector CSS o un nodo DOM real. Actualmente, Nuxt tiene soporte SSR para teletransportes solo a #teleports, con soporte del lado del cliente para otros destinos usando un contenedor <ClientOnly>.
Teletransporte al cuerpo
<template>
<button @click="open = true">
Abrir Modal
</button>
<Teleport to="#teleports">
<div v-if="open" class="modal">
<p>¡Hola desde el modal!</p>
<button @click="open = false">
Cerrar
</button>
</div>
</Teleport>
</template>
Teletransporte del lado del cliente
<template>
<ClientOnly>
<Teleport to="#some-selector">
<!-- contenido -->
</Teleport>
</ClientOnly>
</template>
Editar y previsualizar el código de ejemploexamples > advanced > teleport
※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.
La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/components/teleports