Depois de criar a estrutura de rotas, é hora de montar a base visual do projeto. Como você pode ver no projeto final, todas as páginas têm a mesma estrutura, com cabeçalho e rodapé, e um estilo visual bem único. Nesta página vamos trazer a interface base do Drive, criar o layout e ajustar o nuxt.config.ts.

A base do projeto está no Drive

Para focarmos no que realmente importa, que é o Nuxt, a interface base já vem pronta. Criar todo o CSS e os componentes visuais do zero não caberia no tempo do workshop, então separei essa base para que a gente possa dedicar o nosso tempo às funcionalidades principais, principalmente a integração com a API.

👉🏻 Acessar a pasta do workshop no Google Drive

Baixe o material e copie as pastas abaixo para dentro de app/:

Pasta	O que contém
`assets/css/`	O design system global: cores, fontes e espaçamentos
`components/`	AppHeader, AppFooter, cards, filtros, paginação e outros componentes visuais
`composables/`	Funções reutilizáveis, como a `getCharacterColor`

Além disso, copie a pasta public/, que tem as imagens e o favicon do projeto, para a raiz do projeto (fora de app/).

<aside> ✏️ Personalize: no componente AppFooter, troque o nome em "Desenvolvido por" pelo seu nome. Assim, o projeto fica com a sua assinatura.

</aside>

Criando o layout base de todas as páginas

Todas as páginas têm cabeçalho e rodapé. Em vez de repetir esses componentes em cada página, criamos um layout. Crie o arquivo app/layouts/default.vue:

<template>
    <div class="app-layout">
        <AppHeader />

        <main class="app-layout__main">
            <slot />
        </main>

        <AppFooter />
    </div>
</template>

<style scoped>
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.app-layout__main {
    flex: 1;
}
</style>

Para que serve esse layout?

O arquivo default.vue é o layout padrão do Nuxt: ele é aplicado automaticamente a todas as páginas, graças ao <NuxtLayout> que colocamos no app.vue. O cabeçalho e o rodapé ficam fixos, e só o miolo muda de uma página para outra.

O CSS faz o layout ocupar pelo menos a altura inteira da tela (min-height: 100dvh) e o flex: 1 faz o conteúdo principal crescer, empurrando o rodapé sempre para o final da página.

O slot de novo!

Lembra do <slot /> que estudamos na Parte 1? Aqui ele é o lugar onde cada página aparece. Quando você acessa /characters, o conteúdo de pages/characters/index.vue é renderizado exatamente no lugar do <slot />.