Seja muito bem-vindo(a) ao Workshop de Vue.js e Nuxt.js, um workshop que estou conduzindo para o WebTech Network, com teoria e um projeto prático construído do zero ao lado de vocês.

Além da apresentação ao vivo, resolvi montar este material para auxiliar quem está aprendendo. Aqui você encontra, de forma organizada e passo a passo, tudo o que vamos ver no workshop: os conceitos, os comandos e os códigos completos de cada etapa. Assim, você pode revisar com calma, recuperar algum trecho que passou rápido e continuar evoluindo o projeto depois.

Ao longo dos módulos, você encontrará:

• Explicações detalhadas e acessíveis sobre Vue.js e Nuxt.js;
• Os principais conceitos de reatividade, diretivas e componentes;
• A construção de um projeto real, passo a passo, consumindo uma API;
• Boas práticas de organização e formatação de código;
• Conteúdos preparados para facilitar seu aprendizado, mesmo que você esteja começando agora.

O que vamos construir

O projeto do workshop é o Gumball Verse, uma enciclopédia do universo de O Incrível Mundo de Gumball. A aplicação consome a Gumball API para exibir personagens e lugares, e a API do GitHub para mostrar o perfil de quem desenvolveu o projeto.

• Home: apresentação do projeto, com destaques de personagens e de lugares;
• Personagens: listagem completa com busca por nome, filtros por papel na série e paginação;
• Lugares: listagem completa com busca por nome, filtros por tipo e paginação;
• Detalhes: uma página para cada personagem e para cada lugar, com rotas dinâmicas;
• Sobre: informações do projeto e do seu perfil no GitHub, com contribuições e repositórios;
• Erro 404: uma página de erro para rotas, personagens ou lugares que não existem.

<aside> 🎯 A ideia do workshop é aprender Nuxt na prática. Por isso, a interface base (CSS, componentes visuais e imagens) já vem pronta no material do Drive, e nós focamos no que mais importa: rotas, layout, consumo de API, tratamento de erros e SEO.

</aside>

Materiais do workshop