Étape 5 – Préparer l’affichage de la liste des Pokémon
🎯 Objectifs de l’étape
Dans cette étape, vous allez préparer la page d’accueil (index.vue) pour afficher une **grille de cartes Pokémon **.
Pour l’instant, on crée uniquement la structure de mise en page, sans affichage dynamique.
Vous apprendrez à :
- utiliser le système de grille de Vuetify (
v-container,v-row,v-col), - ajouter un champ de recherche en haut de la page,
- poser les bases pour une mise en page responsive.
🧱 Structure de base à insérer
Dans le fichier src/pages/index.vue, remplacez le contenu existant par le code suivant:
vue
<template>
<v-container>
<h1 class="mb-6 text-center">Pokédex</h1>
<v-text-field
label="Rechercher un Pokémon"
prepend-icon="mdi-magnify"
clearable
/>
<v-row>
<!-- Exemple de colonne vide (à dupliquer plus tard avec du contenu) -->
<v-col
cols="12"
sm="6"
md="4"
lg="3"
xl="2"
>
<p>Carte à venir...</p>
</v-col>
</v-row>
</v-container>
</template>🧠 Comprendre le système de grille Vuetify
Vuetify découpe l’espace horizontal en 12 colonnes.
Chaque v-col peut définir une largeur différente selon la taille de l’écran :
| Attribut | Taille d’écran | Exemple | Nombre de cartes par ligne |
|---|---|---|---|
cols | tous les écrans | cols="12" | 1 colonne |
sm | ≥ 600px (petit) | sm="6" | 2 colonnes |
md | ≥ 960px (moyen) | md="4" | 3 colonnes |
lg | ≥ 1280px (grand) | lg="3" | 4 colonnes |
xl | ≥ 1920px (très grand) | xl="2" | 6 colonnes |
✅ À ce stade, votre page d’accueil contient :
- ✅ Un titre centré (
<h1>) - ✅ Un champ de recherche (non fonctionnel pour l’instant)
- ✅ Une grille responsive avec une ou plusieurs cartes vides
🔍 Tester l'affichage
- Lance le projet avec
npm run dev - Rendez-vous sur http://localhost:3000/
- Vérifiez l’affichage sur différents formats d’écran (ordinateur, tablette, mobile)