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

Agora vamos começar a estruturar o projeto como ele será de verdade. Nesta página vamos entender como funcionam as rotas no Nuxt e criar todas as páginas da aplicação, ainda simples, só com um título, para testar a navegação.

Como as rotas funcionam no Nuxt

No Nuxt, cada arquivo dentro da pasta app/pages/ vira uma rota. Não precisamos configurar nenhum router: o caminho do arquivo define o endereço da página. Estas são as rotas do Gumball Verse:

• index.vue: representa a rota "raiz" da pasta em que está;
• [id].vue: os colchetes indicam uma rota dinâmica, ou seja, um trecho da URL que é variável.

Preparando o app.vue

Para que as páginas apareçam, o app/app.vue precisa dizer onde a página da rota atual deve ser exibida. Substitua o conteúdo dele por:

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>

• <NuxtPage />: mostra a página da rota atual;
• <NuxtLayout>: envolve a página com um layout. Vamos criar o nosso layout na próxima página.

A página de erro

Crie o arquivo app/error.vue:

<template>
    <h1>Página de erro 404</h1>
</template>

O error.vue é um arquivo especial do Nuxt: ele aparece sempre que algo der errado ou quando a rota acessada não existe. Experimente acessar um endereço qualquer, como /pagina-que-nao-existe, e veja essa página aparecer. Mais adiante, vamos usá-lo também quando um personagem ou lugar não for encontrado.