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

Chegou a hora de colocar em prática o que você aprendeu! Este desafio usa o useHead, que vimos algumas páginas atrás, mas agora com dados dinâmicos vindos da API.

O desafio

<aside> 🏆 Deixe dinâmicos o título e o ícone das páginas de detalhes. Na página de um personagem ou de um lugar, a aba do navegador deve mostrar o nome dele no título e usar a imagem dele como favicon.

</aside>

Por exemplo, ao acessar a página do Gumball, a aba deve mostrar o título Gumball | Gumball Verse e a imagem do Gumball como ícone.

Os arquivos que você vai alterar são:

Dicas

  1. Use o useHead depois do tratamento de erro. Assim, você tem certeza de que os dados existem;
  2. Monte o título com crases (template literal) e data.value.name. Lembre-se: no script, o data precisa do .value;
  3. As imagens da API estão no formato WebP, então o type do ícone muda.

<aside> 💡 Tente resolver sozinho antes de abrir a resposta! Se travar, releia a página sobre o useHead e a configuração do favicon no nuxt.config.ts.

</aside>

Resposta

Pronto! Com o desafio concluído, o Gumball Verse está completo. Na próxima página, vamos recapitular tudo o que construímos e ver quais são os próximos passos.