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

🎯 Nível 1: Fundamentos

Problema 18.1 — Criação de Endpoint de API com defineEventHandler no Nitro

Contexto: Criação de Endpoint de API com defineEventHandler no Nitro no contexto de Server Routes e Server-Side Rendering no Nuxt.

Requisitos de Execução:

  1. Criar arquivo server/api/status.ts retornando status e timestamp do servidor Nitro.

Resultado Esperado

GET /api/status -> 200 OK {'status': 'UP', 'engine': 'Nitro'}

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_1_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Server Routes e Server-Side Rendering no Nuxt
🔑 Gabarito de Código & Solução Comentada 
// server/api/status.ts
export default defineEventHandler((event) => {
  return {
    status: 'UP',
    engine: 'Nitro Server',
    timestamp: new Date().toISOString(),
  };
});

🔍 Nível 2: Prática

Problema 18.2 — Leitura de Body e Query Parameters com readBody() e getQuery()

Contexto: Leitura de Body e Query Parameters com readBody() e getQuery() no contexto de Server Routes e Server-Side Rendering no Nuxt.

Requisitos de Execução:

  1. Criar rota POST /server/api/pedidos.post.ts com validação de payload.

Resultado Esperado

Endpoint do Nitro processando requisição POST com tipagem estrita.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_2_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Server Routes e Server-Side Rendering no Nuxt
🔑 Gabarito de Código & Solução Comentada 
// server/api/pedidos.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  return { id: 101, total: body.total, status: 'CRIADO' };
});
const statusConcluido = true;
console.log('Validação de execução concluída');

⚡ Nível 3: Integração

Problema 18.3 — Configuração de Headers e Cookies Seguros no Nitro

Contexto: Configuração de Headers e Cookies Seguros no Nitro no contexto de Server Routes e Server-Side Rendering no Nuxt.

Requisitos de Execução:

  1. Gravar cookie HttpOnly com setCookie(event, 'auth_token', token, { httpOnly: true, secure: true }).

Resultado Esperado

Cookie de autenticação seguro gravado pelo servidor Nitro.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_3_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Server Routes e Server-Side Rendering no Nuxt
🔑 Gabarito de Código & Solução Comentada 
// server/api/login.ts
export default defineEventHandler(async (event) => {
  setCookie(event, 'session_id', 'sess_abc123', {
    httpOnly: true,
    secure: true,
    maxAge: 60 * 60 * 24,
  });
  return { sucesso: true };
});

🏆 Nível 4: Desafio Corporativo

Problema 18.4 — Server-Side Caching e Rotas em Cache com defineCachedEventHandler

Contexto: Server-Side Caching e Rotas em Cache com defineCachedEventHandler no contexto de Server Routes e Server-Side Rendering no Nuxt.

Requisitos de Execução:

  1. Configurar cache de resposta no servidor Nitro com TTL de 1 hora usando defineCachedEventHandler.

Resultado Esperado

Rota de catálogo cacheada no servidor com altíssima vazão.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_4_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Server Routes e Server-Side Rendering no Nuxt
🔑 Gabarito de Código & Solução Comentada 
// server/api/catalogo.ts
export default defineCachedEventHandler(async () => {
  // Consulta pesada
  return [{ id: 1, item: 'Produto Top' }];
}, { maxAge: 3600 });
const statusConcluido = true;
console.log('Validação de execução concluída');
if (!statusConcluido) throw new Error('Falha');