O que são teleports no Vue?

Os teleports no Vue 3 são uma forma de renderizar o conteúdo de um componente noutra parte da árvore DOM, sem estar ligado à localização física do componente na hierarquia.

Isto é útil para:

Janelas modais e pop-ups: Permitem mover facilmente uma janela modal ou uma notificação pop-up para os elementos raiz <body> ou <html>, evitando problemas com z-index e recorte por elementos pais.
Componentes reutilizáveis: Permitem criar componentes que podem renderizar parte do seu conteúdo em diferentes locais, mantendo a sua lógica num único componente.

Sintaxe de uso do <Teleport>:

<template>
  <div>
    <!-- Conteúdo principal do componente -->
    <button @click="showModal = true">Abrir janela modal</button>

    <!-- Conteúdo da janela modal, teletransportado para #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Título da janela modal</h2>
          <p>Texto da janela modal.</p>
          <button @click="showModal = false">Fechar</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

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

O atributo to indica o contêiner alvo no DOM, para onde o conteúdo do <Teleport> será movido. O destino pode ser:

Uma string de seletor CSS (por exemplo, #modal-target, .container).
Um elemento DOM (obtido através de document.getElementById() ou document.querySelector()).

Se o contêiner alvo não for encontrado, o conteúdo não será exibido.

Exemplo de estrutura HTML:

<body>
  <div id="app">
    <!-- Aqui será renderizada a aplicação Vue -->
  </div>

  <!-- Contêiner alvo para o teleporte -->
  <div id="modal-target"></div>
</body>

O estado do componente (showModal no exemplo acima) e a sua lógica permanecem ligados ao componente, mesmo que parte dele seja renderizada noutra localização. Isto torna os teleports uma ferramenta poderosa para gerir interfaces de utilizador complexas com elementos flutuantes.