Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 12.1 — Teletransporte de Modais para o <body> com

Contexto: Teletransporte de Modais para o <body> com no contexto de Teleport e Suspense para Componentes Assíncronos.

Requisitos de Execução:

  1. Renderizar modal fora da hierarquia visual do componente pai usando <Teleport to='body'>.

Resultado Esperado

Modal teletransportado para o final da tag `<body>` evitando problemas de z-index.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_1_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Teleport e Suspense para Componentes Assíncronos
🔑 Gabarito de Código & Solução Comentada 
<!-- ModalTeleport.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const aberto = ref(false);
</script>

<template>
  <button @click="aberto = true">Abrir Modal</button>
  <Teleport to="body">
    <div v-if="aberto" class="modal-overlay">
      <div class="modal-content">
        <h3>Modal no Body</h3>
        <button @click="aberto = false">Fechar</button>
      </div>
    </div>
  </Teleport>
</template>

🔍 Nível 2: Prática

Problema 12.2 — Teleporte Condicional com Prop :disabled

Contexto: Teleporte Condicional com Prop :disabled no contexto de Teleport e Suspense para Componentes Assíncronos.

Requisitos de Execução:

  1. Desabilitar teletransporte em dispositivos móveis mantendo o elemento inline via :disabled='isMobile'.

Resultado Esperado

Teleport desabilitado responsivamente em telas pequenas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_2_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Teleport e Suspense para Componentes Assíncronos
🔑 Gabarito de Código & Solução Comentada 
<!-- ResponsiveTeleport.vue -->
<script setup lang="ts">
defineProps<{ isMobile: boolean }>();
</script>

<template>
  <Teleport to="#sidebar" :disabled="isMobile">
    <div>Menu Lateral</div>
  </Teleport>
</template>

⚡ Nível 3: Integração

Problema 12.3 — Carregamento Assíncrono com e Fallback Skeleton

Contexto: Carregamento Assíncrono com e Fallback Skeleton no contexto de Teleport e Suspense para Componentes Assíncronos.

Requisitos de Execução:

  1. Envolver componente assíncrono com <Suspense> exibindo skeleton de carregamento no #fallback.

Resultado Esperado

Fallback visual exibido enquanto o componente assíncrono resolve sua promise.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_3_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Teleport e Suspense para Componentes Assíncronos
🔑 Gabarito de Código & Solução Comentada 
<!-- SuspenseLoader.vue -->
<script setup lang="ts">
import AsyncUserProfile from './AsyncUserProfile.vue';
</script>

<template>
  <Suspense>
    <template #default><AsyncUserProfile /></template>
    <template #fallback><div class="skeleton-card">Carregando dados...</div></template>
  </Suspense>
</template>

🏆 Nível 4: Desafio Corporativo

Problema 12.4 — Componentes Assíncronos com defineAsyncComponent e Retry

Contexto: Componentes Assíncronos com defineAsyncComponent e Retry no contexto de Teleport e Suspense para Componentes Assíncronos.

Requisitos de Execução:

  1. Declarar componente assíncrono com defineAsyncComponent({ loader, loadingComponent, delay: 200, timeout: 3000 }).

Resultado Esperado

Carregamento assíncrono robusto com tratamento de timeout e delay.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_4_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Teleport e Suspense para Componentes Assíncronos
🔑 Gabarito de Código & Solução Comentada 
// asyncComponent.ts
import { defineAsyncComponent } from 'vue';
import LoadingSpinner from './LoadingSpinner.vue';

export const AsyncChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
  timeout: 5000,
});
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos