The Superhero connection
We want to retrieve data from the Marvel Comics API from different components in our application. A good pattern for doing this is by creating a Vue composable. A Vue composable is a proven pattern for using and reusing logic throughout your application. We’ll create a folder called composables
in the src
folder and create a file called marvelApi.ts
.
You can import the types from the example repository (https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/blob/main/04.marvel/src/types/marvel.ts).
These types are mainly contracts with the API. Feel free to take a look at them. I created them by ingesting the results from the API and defining the types.
We’ll start with an asynchronous function that fetches the data from the API from the comics endpoint and returns a promise of the response. We’re going to expand the functionality gradually. Add a new composable function called useComics
to the file...