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

Chegou a hora de colocar a mão na massa! Nesta página vamos criar o projeto Gumball Verse com Nuxt, configurar o Prettier para formatar o código automaticamente e entender a estrutura de pastas do projeto.

Criando o projeto com Nuxt

No terminal, rode o comando:

npx nuxi@latest init gumball-verse

O assistente de criação fará algumas perguntas. Responda assim:

• Template minimal: começamos com o mínimo possível, apenas o necessário para entender cada arquivo que entra no projeto;
• Sem módulos por enquanto: o estilo do projeto vem do nosso próprio design system em CSS, que já está no material do Drive.

Prettier: formatação automática

O Prettier é um formatador de código: ele reescreve os arquivos sempre no mesmo estilo. Assim, ninguém precisa discutir vírgula ou indentação, e o código fica igual em qualquer computador.

1. Instalar no projeto

Dentro da pasta do projeto, instale o Prettier como dependência de desenvolvimento:

cd gumball-verse
npm install prettier --save-dev

2. Criar o arquivo .prettierrc na raiz

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 100
}

O que cada regra faz: