DEV {JS}

Mode sombre

Étape 8 – Créer un composant PokemonCard.vue ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez isoler l’affichage d’un Pokémon dans un composant réutilisable.
Cela permet de :

  • organiser votre code de manière modulaire,
  • éviter la duplication de code HTML,
  • réutiliser facilement le même composant sur d’autres pages (ex. favoris).

📁 Étapes à suivre ​

  1. Créer un nouveau fichier PokemonCard.vue dans le dossier src/components/.

  2. Dans ce fichier, ajoutez une structure de base avec un defineProps :

vue
<template>
  <v-card class="pt-4">
    <v-img :src="`/images/${pokemon.img}`" height="200" contain />
    <v-card-title>{{ pokemon.name }}</v-card-title>
    <v-card-subtitle>
      <v-card-text>Level: {{ pokemon.level }}</v-card-text>
    </v-card-subtitle>
    <!-- À compléter plus tard avec les types -->
  </v-card>
</template>

<script setup>
defineProps({
  pokemon: Object
})
</script>
  1. Dans index.vue, remplacez le contenu du v-col par ce composant :
vue

<PokemonCard :pokemon="pokemon"/>
  1. Importer le composant (si l’auto-import n’est pas actif) :
js
import PokemonCard from '@/components/PokemonCard.vue'

✅ Résultat attendu ​

  • Le composant PokemonCard.vue affiche une seule carte Pokémon
  • Il utilise des props pour recevoir les données (pokemon)
  • Il est utilisé dans index.vue à l’intérieur d’une boucle v-for

🧪 Tester votre travail ​

  1. Lancez l’application
  2. Vérifiez que chaque carte est bien affichée via PokemonCard
  3. Essayez de modifier l’apparence du composant (ex : couleurs, tailles, marges…)

📘 Documentation utile ​

💡 Suggestions bonus ​

  • Ajoutez une bordure ou une couleur de fond selon le type du Pokémon (plus tard)
  • Intégrez un bouton ou une icône pour gérer les favoris (étape 11)
  • Testez l’effet hover avec class="hover:scale-105 transition-transform"

🔁 Rappel d'utilisation dans index.vue ​

vue
<v-col
  v-for="pokemon in pokemonStore.pokemons"
  :key="pokemon.id"
  cols="12"
  sm="6"
  md="4"
  lg="3"
  xl="2"
>
  <PokemonCard :pokemon="pokemon" />
</v-col>