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

Com o projeto rodando, vamos fazer a primeira conexão com dados reais. Nesta página vamos conhecer a Gumball API, entender o useFetch e exibir na tela um personagem aleatório.

Conhecendo a Gumball API

A Gumball API é a API que fornece todos os dados do nosso projeto, como os personagens e os lugares do universo de Gumball. O endereço base é:

https://gumball-api-server.vercel.app

Cada rota devolve os dados em formato JSON. Você pode abrir os endereços direto no navegador para ver a resposta de cada uma. Neste workshop, vamos usar principalmente estas rotas:

Rota O que devolve
/characters/random Um array com um personagem aleatório
/characters A lista de personagens, com paginação
/characters/:id Os dados de um personagem específico
/locations A lista de lugares, com paginação
/locations/:id Os dados de um lugar específico

Fazendo a primeira requisição

O useFetch é um composable do Nuxt, ou seja, uma função pronta que faz a requisição e já devolve dados reativos. Como o Nuxt importa tudo automaticamente, não é preciso escrever nenhum import. No app/app.vue, escreva:

<script setup lang="ts">
const { data } = await useFetch('https://gumball-api-server.vercel.app/characters/random');
console.log(data.value);
</script>

<template>
    <h1>Hello, Nuxt.js!</h1>
</template>

Abra o terminal onde o projeto está rodando e também o console do navegador: o personagem aparece nos dois, porque a página é montada primeiro no servidor e depois hidratada no navegador.

Por que data.value?

O data retornado pelo useFetch é um Ref do Vue, o mesmo ref que estudamos na Parte 1. Por isso:

Exibindo um personagem aleatório na tela

A rota /characters/random devolve um array com um personagem. Por isso, para acessar os dados, usamos data[0]. O código para exibir o personagem fica assim: