¿Qué son los teleports en Vue?

Los teleports en Vue 3 son una forma de renderizar el contenido de un componente en otro lugar del árbol DOM, sin estar ligado a la ubicación física del componente en la jerarquía.

Esto es útil para:

Ventanas modales y emergentes: Permiten mover fácilmente una ventana modal o una notificación emergente a los elementos raíz <body> o <html>, evitando problemas con z-index y recortes por elementos padres.
Componentes reutilizables: Permiten crear componentes que puedan renderizar parte de su contenido en diferentes lugares, manteniendo su lógica en un solo componente.

Sintaxis de uso de <Teleport>:

<template>
  <div>
    <!-- Contenido principal del componente -->
    <button @click="showModal = true">Abrir ventana modal</button>

    <!-- Contenido de la ventana modal, teletransportado a #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Título de la ventana modal</h2>
          <p>Texto de la ventana modal.</p>
          <button @click="showModal = false">Cerrar</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);
</script>

<style scoped>
/* Estilos para el componente */
</style>

El atributo to indica el contenedor objetivo en el DOM, donde se moverá el contenido de <Teleport>. La finalidad puede ser:

Una cadena de selector CSS (por ejemplo, #modal-target, .container).
Un elemento DOM (obtenido mediante document.getElementById() o document.querySelector()).

Si no se encuentra el contenedor objetivo, el contenido no se mostrará.

Ejemplo de estructura HTML:

<body>
  <div id="app">
    <!-- Aquí se renderizará la aplicación Vue -->
  </div>

  <!-- Contenedor objetivo para el teletransporte -->
  <div id="modal-target"></div>
</body>

El estado del componente (showModal en el ejemplo anterior) y su lógica permanecen vinculados al componente, incluso si parte de este se renderiza en otro lugar. Esto hace que los teleports sean una herramienta poderosa para gestionar interfaces de usuario complejas con elementos emergentes.