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

Bem-vindo à Parte 2 do workshop! O Nuxt.js é um framework full stack construído sobre o Vue. Ele entrega, já prontos para usar, recursos que toda aplicação real precisa: rotas, servidor e SEO.

Antes de criar o projeto, vamos entender de onde o Nuxt veio, quais problemas ele resolve e alguns conceitos que vão aparecer o tempo todo nas próximas páginas.

Como o Nuxt surgiu

O Vue resolvia muito bem a interface, mas cada projeto precisava montar do zero as rotas, a renderização no servidor e a organização de pastas. Inspirados no Next.js, do mundo React, os irmãos Alexandre e Sébastien Chopin criaram o Nuxt.

Principais vantagens

• Rotas por arquivos: cada arquivo em pages/ vira uma rota, sem precisar configurar um router;
• Auto-imports: componentes, composables e funções do Vue são usados sem escrever import;
• SSR e SEO: o HTML já vem pronto do servidor, o que é ótimo para buscadores e redes sociais;
• Busca de dados: o useFetch busca os dados no servidor e reaproveita o resultado no navegador;
• Servidor integrado: a pasta server/, com o Nitro, permite criar a sua própria API no mesmo projeto;
• Módulos e DevTools: integrações oficiais e da comunidade com um comando, além de um DevTools próprio.

Como o Nuxt entrega a página

A maior diferença entre um projeto Vue puro e um projeto Nuxt está em onde a página é montada.

<aside> 💡 É por isso que usamos await no useFetch: o servidor espera os dados antes de enviar a página, e o navegador não precisa repetir a requisição.

</aside>