Bem-vindo à Parte 3, a integração com a API! Vamos começar pelas seções de destaque da página inicial: a listagem de personagens e a listagem de lugares. Ambas já existem na interface base, mas ainda não buscam nenhum dado. Vamos resolver isso, entendendo bem o que cada trecho significa.

Listagem de personagens

Abra o componente app/components/CharactersListing/index.vue e deixe-o assim:

<script setup>
const { data, error } = await useFetch('https://gumball-api-server.vercel.app/characters', {
    query: { limit: 8 },
});
</script>

<template>
    <section class="section">
        <div class="container">
            <SectionHeader
                eyebrow="Seção 01 · Elenco"
                lead="Da família Watterson aos colegas da Elmore Junior High, cada um mais imprevisível que o outro."
                see-all-url="/characters"
            >
                Os moradores mais <em>esquisitos</em> de Elmore
            </SectionHeader>

            <StateMessage v-if="error">
                Não foi possível carregar os personagens. Tente novamente mais tarde.
            </StateMessage>

            <div v-else class="grid grid--characters">
                <CharacterCard
                    v-for="currentCharacter in data?.data"
                    :key="currentCharacter.id"
                    :id="currentCharacter.id"
                    :name="currentCharacter.name"
                    :image="currentCharacter.image"
                    :species="currentCharacter.species"
                    :occupation="currentCharacter.occupation"
                    :role="currentCharacter.role"
                    :color="getCharacterColor(currentCharacter.colors)"
                />
            </div>
        </div>
    </section>
</template>

Entendendo o código

useFetch: é o composable do Nuxt que faz a requisição HTTP e devolve dados reativos. Além do data, ele também devolve o error, que fica preenchido quando a requisição falha;
Por que usar o await: o await garante que os dados cheguem antes de a página ser montada no servidor. Assim, o HTML já vai para o navegador com os personagens, o que é ótimo para o SEO;
query: o objeto query vira parâmetros na URL. Aqui, { limit: 8 } vira ?limit=8, e a API devolve só 8 personagens;
data?.data: a resposta da API tem duas partes: data, com a lista de itens, e meta, com as informações de paginação. Por isso acessamos data?.data. O ?. (optional chaining) evita erros enquanto ainda não há dados.

<aside> 🔎 Dica: para entender o formato da resposta, adicione console.log(data.value) logo depois do useFetch e veja o resultado no terminal. Lembre-se: no script usamos .value, no template não.

</aside>

O v-for, a :key e as props

v-for: para cada personagem dentro de data?.data, um <CharacterCard> é criado;
:key: usamos o id do personagem, que é único, para o Vue identificar cada card;
Props com : todas as props usam :, porque os valores vêm de variáveis JavaScript, e não de textos fixos. Lembre da regra de ouro da Parte 1!
getCharacterColor: é uma função da pasta composables/ que escolhe a cor do card a partir das cores do personagem. Por ser um composable, ela também é importada automaticamente.

Tratando o erro

Com o v-if="error", se a API falhar, mostramos uma mensagem amigável com o componente StateMessage em vez de quebrar a página. O v-else garante que a grade de personagens só aparece quando não há erro.