📊 Capítulo 12: Teleport & Suspense

Especialização em Frontend com Vue.js

🗺️ O Transporte de DOM com Teleport e Tratamento Assíncrono com Suspense

flowchart TD
    subgraph TELEPORT ["Teleport (Fuga da Hierarquia de CSS / z-index)"]
        COMP["Componente Filho Profundo"]
        --> |"<Teleport to='body'>"| BODY["Renderiza o nó DOM diretamente no <body>!"]
        BODY --> WHY["Evita overflow:hidden e bugs de z-index cortando modais!"]
    end

    subgraph SUSPENSE ["Suspense (Coordenação Assíncrona)"]
        SUSP["<Suspense>"]
        --> |"default"| ASYNC_COMP["Componente com top-level await"]
        SUSP --> |"fallback"| SPINNER["<LoadingSpinner />"]
    end

    style TELEPORT fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style COMP fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style BODY fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style SUSPENSE fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style ASYNC_COMP fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style SPINNER fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px

🎯 Slide 1: `<Teleport>` para Modais e Toasts

<button @click="abrir = true">Abrir Notificação</button>

<Teleport to="body">
  <div v-if="abrir" class="toast-fixed-top">
    Operação realizada com sucesso!
  </div>
</Teleport>

O componente continua dentro da árvore lógica do Vue (props e emits continuam funcionando normalmente), mas o nó HTML real é inserido fora da hierarquia visual restrita!

🎯 Slide 2: `<Suspense>` e Top-Level `await`

<script setup lang="ts">
// Top-level await direto no script setup!
const dados = await api.carregarDashboard();
</script>

🎯 Slide 3: Fallback Elegante de Carregamento

<Suspense>
  <template #default>
    <DashboardAssincrono />
  </template>
  <template #fallback>
    <div class="skeleton">Carregando painel analítico...</div>
  </template>
</Suspense>