<aside> <img src="/icons/arrow-northeast_gray.svg" alt="/icons/arrow-northeast_gray.svg" width="40px" />

Índice

</aside>

<aside> <img src="/icons/notion_green.svg" alt="/icons/notion_green.svg" width="40px" />

Conteúdos

Introdução

Introdução ao Vue.js

Anatomia de um componente .vue

Interpolação e reatividade com ref e computed

Diretivas: v-bind, v-on, v-if, v-for e v-model

Componentes e props

Slots, emits e ciclo de vida

Introdução ao Nuxt.js

Criando o projeto Gumball Verse

Primeira requisição com useFetch

Rotas a partir de arquivos

Layout, base do projeto e nuxt.config.ts

Consumindo a API nas listagens

Páginas de detalhes com rotas dinâmicas

Tratando o erro 404 com createError

Títulos das páginas com useHead

Filtros, paginação e busca com debounce

Desafio: título e favicon dinâmicos

Conclusão e próximos passos

</aside>

Parabéns por chegar até aqui! 🎉 Ao longo deste workshop, saímos do primeiro componente Vue e chegamos a uma aplicação completa com Nuxt, com rotas, consumo de API, tratamento de erros e SEO.

O que construímos

Vue.js

• Componentes .vue com <script setup> e <style scoped>;
• Reatividade com ref e computed;
• Diretivas: v-bind, v-on, v-if, v-for e v-model;
• Comunicação entre componentes com props, slots e emits;
• Ciclo de vida com onMounted.

Nuxt.js

• Rotas por arquivos, rotas dinâmicas e layout;
• Consumo de API com useFetch e query params;
• Erro 404 correto com createError;
• SEO com useHead, filtros, paginação e busca com debounce.

Próximos passos

O Gumball Verse é uma ótima base para continuar praticando. Algumas ideias para evoluir o projeto:

• Página de erro completa: use a prop error no error.vue para exibir mensagens diferentes para o 404 e para os outros erros;
• Estados de carregamento: explore o status retornado pelo useFetch para mostrar um carregamento enquanto os dados chegam;