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

🎯 Nível 1: Fundamentos

Problema 19.1 — Gerenciamento de Meta Tags de SEO com useSeoMeta()

Contexto: Gerenciamento de Meta Tags de SEO com useSeoMeta() no contexto de Otimização de Performance, SEO e PWA.

Requisitos de Execução:

  1. Configurar título dinâmico, descrição, OpenGraph e canonical URL com useSeoMeta() no Nuxt/Vue.

Resultado Esperado

Meta tags de SEO geradas no HTML renderizado pelo servidor.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_1_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance, SEO e PWA
🔑 Gabarito de Código & Solução Comentada 
<!-- MetaSeo.vue -->
<script setup lang="ts">
useSeoMeta({
  title: 'Catálogo de Produtos | Minha Loja',
  description: 'Confira as melhores ofertas com frete grátis.',
  ogTitle: 'Catálogo Oficial',
  ogImage: '/banner-og.png',
  twitterCard: 'summary_large_image',
});
</script>

🔍 Nível 2: Prática

Problema 19.2 — Otimização de Imagens com @nuxt/image

Contexto: Otimização de Imagens com @nuxt/image no contexto de Otimização de Performance, SEO e PWA.

Requisitos de Execução:

  1. Utilizar <NuxtImg src='/foto.jpg' width='400' height='300' format='webp' loading='lazy' />.

Resultado Esperado

Imagem redimensionada e convertida para WebP automaticamente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_2_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance, SEO e PWA
🔑 Gabarito de Código & Solução Comentada 
<!-- NuxtImageDemo.vue -->
<template>
  <NuxtImg
    src="/produtos/teclado.jpg"
    width="600"
    height="400"
    format="webp"
    loading="lazy"
    alt="Teclado Mecânico"
  />
</template>

⚡ Nível 3: Integração

Problema 19.3 — Configuração de PWA e Service Worker com @vite-pwa/nuxt

Contexto: Configuração de PWA e Service Worker com @vite-pwa/nuxt no contexto de Otimização de Performance, SEO e PWA.

Requisitos de Execução:

  1. Configurar manifesto PWA com ícones e estratégia de cache offline CacheFirst.

Resultado Esperado

Aplicação instalável como PWA com suporte a navegação offline.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_3_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance, SEO e PWA
🔑 Gabarito de Código & Solução Comentada 
// pwa.config.ts
export const pwaConfig = {
  manifest: {
    name: 'Portal E-Commerce PWA',
    short_name: 'ECommerce',
    theme_color: '#0f172a',
    icons: [{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' }],
  },
};

🏆 Nível 4: Desafio Corporativo

Problema 19.4 — Auditoria de Core Web Vitals (LCP, FID, CLS)

Contexto: Auditoria de Core Web Vitals (LCP, FID, CLS) no contexto de Otimização de Performance, SEO e PWA.

Requisitos de Execução:

  1. Implementar monitoramento de métricas Web Vitals enviando scores para endpoint de telemetria.

Resultado Esperado

Métricas de performance auditadas (LCP < 2.5s, CLS < 0.1).

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_4_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance, SEO e PWA
🔑 Gabarito de Código & Solução Comentada 
// Implementação de referência para o requisito do nível
// webVitals.ts
export function monitorarWebVitals(metric: any) {
  console.log(`[Web Vitals] ${metric.name}: ${metric.value.toFixed(2)}`);
}
// Conclusão da operação e validação de conformidade
const statusConcluido = true;
console.log('Validação de execução concluída');
if (!statusConcluido) throw new Error('Falha');