Antes de começar confira o resultado do nosso desenvolvimento no vídeo abaixo
Clique na imagem para ser redirecionado!
Este projeto foi desenvolvido a partir do The Vue 3 Bootcamp - The Complite Developer Guide, como proposta de quarto projeto usando o vue 3.
- App Overview
- The Process of Fetching Data From an API
- Creating the App
- Where to Fetch the Data
- Making the HTTP Requests
- The Suspense Component
- Request Offsets and Limits
- Implementign Paginations
- Building the UI
- Component Lifecycle Hooks
- Fetching Data With onMounted
- Slots For Dynamic HTML
- More on Slots
- Adding a Better Loading State
- Creating the Header Component
- Maintaining State With KeepAlive
Note
Vale ressaltar que para esse projeto usamos duas API's diferente. A primeira: Game Of Thrones API, e a segunda: Rick and Morty API.
Note
Outra questão é que no curso o professor usa outra API para o primeiro caso (Breaking Bad API), mas no momento do curso essa API já não está disponível e por isso ele sugere trabalhar com a Game Of Thrones. Porém, surge outro problema, usando a Game Of Thrones API não é possível realizar a paginação adequada, pois essa API não suporta. Por isso, nesse projeto a paginação não é feita. O código com essa páginação está comentada para enventuais consultas.
Note
Usamos também nesse projeto a Naive UI para renderizar os cards e botões.
Warning
Algumas adaptações foram feitas no código.
🤓
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm install
npm run dev
npm run build