Managing the roster

With our brand new composable, we have easy access to more data from the Marvel Developer API! We’ll move onto creating the Vue components that will allow the user interface to deal with searching.

We’ll first create a variant of the ComicCard.vue named CharacterCard.vue. The component will be a bit simpler, so you can either paste the following contents in the file or create a copy of the ComicCard.vue and update it to match the contents:

<script setup lang="ts">import type { Character } from "@/types/marvel";
import CardView from "./CardView.vue";
interface Props {
  character: Character;
}
const props = defineProps<Props>();
</script>
<template>
  <CardView :id="character.id">
    <img :src="`${character.thumbnail.path}.${character.thumbnail.extension}`" class="float-left w-12 h-12 mb-2 mr-4 rounded-full shadow-md...