O que é o componente Teleport?

Question

Accepted Answer

`` renderiza a markup de um componente em um **local diferente no DOM** do que onde está declarado em sua árvore de componentes — mas o mantém logicamente como parte do componente (reatividade, props, eventos ainda funcionam). ## O problema que ele resolve Modais, tooltips e notificações geralmente precisam ser um **filho direto de ``** para evitar problemas de CSS — `overflow: hidden`, `transform` ou contexto de empilhamento `z-index` de um pai pode cortar ou desposicionar incorretamente um modal. Mas logicamente, o modal pertence ao componente que o dispara. ## Usando Teleport ```vue ``` A markup do modal é **movida** para ser um filho de `` no DOM real, escapando de qualquer pai de corte/empilhamento — mas `open`, `@click` e qualquer prop permanece totalmente reativo, porque logicamente ainda faz parte deste componente. ## Por que isso importa ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Ao escapar dos ancestrais aprisionadores, o modal pode cobrir confiavelmente toda a área de visualização e ficar acima de todo o outro conteúdo com um `z-index` previsível. ## O destino pode ser qualquer seletor ```vue ... ... ``` ## Por que isso importa Teleport resolve de forma limpa o problema CSS clássico de sobreposições (modais, tooltips, toasts, dropdowns) sendo cortadas ou mal empilhadas por seus ancestrais DOM. Ele permite que você crie a sobreposição onde logicamente pertence (dentro do componente disparador, com reatividade total) enquanto a renderiza onde precisa estar no DOM (geralmente ``). É o equivalente incorporado do Vue de portais React — a forma padrão e robusta de construir UI de sobreposição.