<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>

O que é este workshop?

Bem-vindo ao material do nosso Workshop de Vue.js e Nuxt.js! Aqui você vai aprender a construir interfaces modernas com o Vue.js e, em seguida, transformar esse conhecimento em uma aplicação completa com o Nuxt.js, com rotas, consumo de API e SEO.

<aside> 💡 O Nuxt.js é um framework construído em cima do Vue.js. Por isso, tudo o que você aprender na parte de Vue continua valendo quando chegarmos ao Nuxt.

</aside>

Por que Vue.js e Nuxt.js?

O Vue é conhecido por ser simples de aprender e muito agradável de usar, sem abrir mão de poder e performance. O Nuxt pega essa base e entrega, já prontos, recursos que toda aplicação real precisa: rotas por arquivos, renderização no servidor, busca de dados e configuração de SEO. É uma combinação excelente tanto para quem está começando quanto para projetos profissionais.

O que vamos construir

Durante o workshop vamos desenvolver o Gumball Verse, uma aplicação web que apresenta os personagens e os lugares do universo de O Incrível Mundo de Gumball, consumindo dados reais da Gumball API.

O que veremos neste curso

O conteúdo foi dividido em partes, seguindo uma ordem lógica de aprendizado:

  1. Introdução: o que é o workshop, o que vamos construir e onde encontrar os materiais;
  2. Parte 1 · Vue.js: história e conceitos, anatomia de um arquivo .vue, reatividade, diretivas e componentes;
  3. Parte 2 · Nuxt.js: história e vantagens, criação do projeto, primeira requisição, rotas e layout;
  4. Parte 3 · Integração com a API: listagens, páginas de detalhes, tratamento de erro 404, SEO com useHead, filtros, paginação e busca;
  5. Desafio final e conclusão: colocando tudo em prática e próximos passos.

Links importantes