Étape 1 — Appeler l'API et afficher les Pokémon

Résultat final (toutes les séquences terminées)

Votre version sera plus simple au début : pas de recherche, pas de filtres, pas de favoris. Ces fonctionnalités seront ajoutées dans les séquences suivantes.

Objectifs

• Appeler l'API Pokédex avec fetch() dans onMounted
• Stocker les données dans une variable réactive (ref)
• Afficher les Pokémon dans une grille responsive avec Vuetify

Prérequis

• Le serveur API tourne sur http://localhost:3535 (npm run dev dans le dossier de l'API)
• Le projet Pokédex est cloné et npm run dev fonctionne

Bonnes pratiques Git

Tout au long de cet exercice, vous allez commiter régulièrement votre travail. Un commit = une étape terminée.

Encart oral — Pourquoi commiter souvent ?

Un commit est une sauvegarde de votre code à un instant donné. Si vous cassez quelque chose, vous pouvez revenir en arrière.

Convention de messages :

• feat: description — nouvelle fonctionnalité
• fix: description — correction de bug
• docs: description — documentation

Exemple : feat: affichage grille Pokémon depuis l'API

Premier commit

Avant de commencer, faites un premier commit du squelette :

git add -A
git commit -m "chore: squelette initial du Pokédex"

Ensuite, commitez à chaque fin d'étape (le message est suggéré en bas de chaque étape).

Tâches

1. Comprendre l'API

Ouvrez http://localhost:3535/pokemons dans votre navigateur. Vous voyez un tableau JSON de Pokémon. Chaque Pokémon a :

Propriété	Type	Exemple
id	string	"5566710e-..."
name	string	"Pikachu"
level	number	35
img	string	"pikachu.png"
types	array	[1]
description	string	"Pikachu stocke..."
stats	object	{ hp: 35, attack: 55, ... }
official	boolean	true (uniquement pour les 10 Pokémon de base)

2. Appeler l'API dans index.vue

Dans src/pages/index.vue, ajoutez un <script setup> qui charge les données depuis l'API.

Voici les 3 concepts clés à comprendre :

Concept	Ce que ça fait	Exemple
ref([])	Crée une variable réactive (un tableau vide)	const pokemons = ref([])
onMounted(...)	Exécute du code après l'affichage de la page	Charger les données de l'API
await fetch(url)	Appelle une URL et attend la réponse	await fetch('http://...')
.value	Accède au contenu d'un ref dans le <script>	pokemons.value = données

À faire :

1. Créez une variable réactive pokemons (tableau vide au départ)
2. Dans onMounted, appelez fetch('http://localhost:3535/pokemons')
3. Stockez la réponse JSON dans pokemons.value
4. Vérifiez dans la console du navigateur que les données s'affichent

onMounted et ref sont auto-importés

Grâce au plugin unplugin-auto-import, vous n'avez pas besoin d'écrire import { ref, onMounted } from 'vue'. Ils sont disponibles directement dans <script setup>.

3. Afficher une grille de cartes

Dans le <template>, créez une grille Vuetify avec les composants suivants :

Composant	Rôle	Documentation
<v-container>	Centre le contenu avec une largeur maximale	Grids
<v-row>	Ligne de la grille (flexbox)	Grids
<v-col>	Colonne avec breakpoints responsive	Grids
<v-card>	Conteneur stylisé pour un élément	Cards
<v-img>	Image responsive avec chargement progressif	Images
<v-card-title>	Titre de la carte	Cards
<v-card-subtitle>	Sous-titre de la carte	Cards

Structure à créer :

v-for — Répéter un élément pour chaque donnée

v-for="pokemon in pokemons" crée une copie de l'élément pour chaque Pokémon du tableau. C'est comme une boucle for mais dans le HTML.

:key="pokemon.id" est obligatoire — il donne à Vue un identifiant unique pour chaque élément, afin de savoir lequel mettre à jour quand les données changent.

Breakpoints recommandés pour <v-col> (grille responsive) :

Attribut	Valeur	Résultat
cols	12	1 carte/ligne (mobile)
sm	6	2 cartes/ligne (tablette)
md	4	3 cartes/ligne (écran moyen)
lg	3	4 cartes/ligne (grand écran)

Pour chaque carte, affichez :

• L'image avec <v-img> (hauteur 200px, mode cover)
• Le nom avec <v-card-title>
• Le niveau avec <v-card-subtitle>

Images : utilisez getImageUrl()

Les images sont dans public/images/. Pour construire le chemin correctement (compatible avec le déploiement), utilisez le helper getImageUrl() :

import { getImageUrl } from '@/utils/imageUrl'

Puis dans le template : :src="getImageUrl(pokemon.img)"

Tests

• La page affiche les Pokémon dans une grille de cartes
• Chaque carte montre l'image, le nom et le niveau
• La grille est responsive (redimensionner la fenêtre)
• La console affiche les données sans erreur

Solution

src/pages/index.vue

<template>
  <!-- Conteneur principal — centre le contenu et limite la largeur -->
  <v-container>
    <!--
    Titre de la page
      * text-h3 : taille de titre niveau 3
      * text-center : centré horizontalement
      * my-6 : marge verticale (haut + bas) de 6 unités
    -->
    <h1 class="text-h3 text-center my-6">Pokédex</h1>

    <!--
    Grille responsive Vuetify (basée sur flexbox, 12 colonnes)
      * v-row = ligne
      * v-col = colonne, les breakpoints définissent combien de colonnes occuper
    -->
    <v-row>
      <!--
      v-for crée une colonne pour chaque Pokémon
        * :key est obligatoire — identifiant unique pour Vue
        * cols="12" : 1 carte/ligne sur mobile (12/12 = 100%)
        * sm="6" : 2 cartes/ligne sur tablette (6/12 = 50%)
        * md="4" : 3 cartes/ligne sur écran moyen (4/12 = 33%)
        * lg="3" : 4 cartes/ligne sur grand écran (3/12 = 25%)
      -->
      <v-col
        v-for="pokemon in pokemons"
        :key="pokemon.id"
        cols="12"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <!--
          Image du Pokémon
            * :src lie dynamiquement le chemin de l'image
            * height="200" fixe la hauteur
            * cover remplit l'espace en gardant les proportions
          -->
          <v-img
            :src="getImageUrl(pokemon.img)"
            :alt="pokemon.name"
            height="200"
            cover
          />
          <!-- Nom du Pokémon -->
          <v-card-title>{{ pokemon.name }}</v-card-title>
          <!-- Niveau du Pokémon -->
          <v-card-subtitle>Niveau {{ pokemon.level }}</v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
// Import du helper pour construire les chemins d'images
import { getImageUrl } from '@/utils/imageUrl'

// Variable réactive contenant la liste des Pokémon (tableau vide au départ)
// ref() est auto-importé grâce à unplugin-auto-import
const pokemons = ref([])

// onMounted s'exécute une fois que le composant est affiché dans le navigateur
// C'est le bon endroit pour charger des données depuis une API
onMounted(async () => {
  const response = await fetch('http://localhost:3535/pokemons')
  pokemons.value = await response.json()
  console.log('Pokémon chargés :', pokemons.value)
})
</script>

Commit

git add -A
git commit -m "feat: affichage grille Pokémon depuis l'API"