Marvel Explorer

Update: Marvel discontinued its public Comics API in late 2025, so the live integration this project talks to no longer works. The code, the composable, and the lessons below are still exactly what I built.

What it is

An explorer for the Marvel universe: search characters, browse their comics, and page through the results. It follows chapter 4 of Building Real-World Web Applications with Vue.js 3 (Packt), the chapter about wiring a Vue 3 app up to a real third-party API instead of local mock data, picked up right after Yet Another Todo List.

Stack

Vue 3 with the Composition API, TypeScript, Vite, Vue Router, and Tailwind CSS. A marvelApi composable wraps every call to the Marvel API, with the responses typed end to end (src/types/marvel.ts) so the components work with real shapes instead of loose JSON.

What I learned

Pulling every API call into one composable (marvelApi.ts) is what made pagination, loading, and error states reusable across the search and home views instead of duplicated in each. It’s also where typing a third-party API’s responses stopped feeling optional (the Marvel API’s nested data.results[] shape is exactly the kind of thing that breaks a template silently if TypeScript isn’t checking it).