Por enquanto, as nossas páginas não têm um título próprio na aba do navegador. Poderíamos configurar um título global no nuxt.config.ts, mas neste projeto vamos configurar cada página separadamente, para entender melhor como funciona e deixar tudo mais personalizado. Para isso, vamos usar o useHead.

O que é o useHead?

O useHead é um composable do Nuxt que altera o <head> da página: título, meta tags, favicon e outros elementos. Como o Nuxt renderiza a página no servidor, essas informações já vão no HTML, e os buscadores e redes sociais enxergam tudo. Isso é essencial para o SEO.

Estes serão os títulos de cada página:

Página inicial (/): Gumball Verse
Personagens (/characters): Personagens | Gumball Verse
Lugares (/locations): Lugares | Gumball Verse
Sobre (/about): Sobre | Gumball Verse

Página inicial

Atualize o arquivo app/pages/index.vue:

<script setup>
useHead({
    title: 'Gumball Verse',
});
</script>

<template>
    <div>
        <HomeHero />
        <CharactersListing id="characters" />
        <LocationsListing id="locations" class="section--tinted" />
    </div>
</template>

Além do título, a página inicial agora monta as três seções: o HomeHero e as duas listagens que integramos com a API.

Página Sobre

Atualize o arquivo app/pages/about/index.vue:

<script setup>
const GITHUB_USERNAME = 'arturbomtempo-dev';

useHead({
    title: 'Sobre | Gumball Verse',
});
</script>

<template>
    <div>
        <PageHero
            color="pink"
            eyebrow="Bastidores"
            title="Sobre o projeto"
            lead="Quem construiu o Gumballverse, como ele funciona e o que tem por trás de cada card."
        />

        <AboutProject />
        <AuthorProfile class="section--tinted" :username="GITHUB_USERNAME" />
        <ContributionsCalendar :username="GITHUB_USERNAME" />
        <RepositoriesListing class="section--tinted" :username="GITHUB_USERNAME" />
    </div>
</template>

<aside> ✏️ Não se esqueça de trocar o valor de GITHUB_USERNAME pelo seu usuário do GitHub. Os componentes AuthorProfile, ContributionsCalendar e RepositoriesListing usam esse valor para buscar o seu perfil, as suas contribuições e os seus repositórios na API do GitHub.

</aside>