Exercice Pokédex Vuetify

Introduction

Dans cet exercice, vous allez créer un Pokédex interactif avec Vue.js 3, Vuetify 3, Pinia et Axios.

Chaque nouveau concept est d'abord appris ici, puis transposé dans votre projet personnel.

La progression suit le même chemin dans les deux projets :

Exemple de solution : https://fallinov.github.io/esig-141-pokedex-vuetify/

Mise en place

1. Démarrer le serveur API

L'API Pokédex est un serveur Express local qui fournit les données des Pokémon.

Terminal

git clone https://github.com/fallinov/2025-sfa-pokedex-api.git
cd 2025-sfa-pokedex-api
npm install
npm run dev

WebStorm

1. Ouvrir : github.com/fallinov/2025-sfa-pokedex-api
2. Cliquer sur "Code" → copier l'URL
3. WebStorm : File → New → Project from Version Control...
4. Coller l'URL → Clone
5. Terminal intégré : npm install && npm run dev

Le serveur démarre sur le port 3535. Vérifiez que l'API répond : ouvrez http://localhost:3535/pokemons dans votre navigateur.

Deux projets, deux terminaux

Pendant le cours, vous aurez deux projets ouverts dans WebStorm :

• L'API Pokédex (terminal avec npm run dev → port 3535)
• Le Pokédex Vuetify (terminal avec npm run dev → port 3000)

Les deux doivent tourner en même temps.

2. Cloner le projet Pokédex

Créer votre copie du projet

1. Ouvrir le dépôt template : github.com/fallinov/esig-141-pokedex-vuetify
2. Cliquer sur "Use this template" → "Create a new repository"
3. Repository name : pokedex-vuetify
4. Visibilité : Public
5. Cliquer sur "Create repository"

Terminal

git clone https://github.com/VOTRE-PSEUDO/pokedex-vuetify.git
cd pokedex-vuetify
npm install
npm run dev
# → Ouvrir http://localhost:3000

WebStorm

1. Copier l'URL de votre dépôt
2. WebStorm : File → New → Project from Version Control...
3. Coller l'URL → Clone
4. Terminal intégré : npm install && npm run dev
5. Ouvrir http://localhost:3000

Structure du projet

src/
├── components/         # Composants réutilisables (auto-importés)
│   └── AppHeader.vue   # Barre de navigation
├── pages/              # Chaque fichier .vue = une route automatique
│   ├── index.vue       # Page d'accueil (/)
│   └── [...path].vue   # Page 404
├── plugins/            # Configuration Vuetify, Pinia, Router
├── stores/             # Magasins Pinia (état global)
│   └── index.js        # Instance Pinia (vide)
├── styles/
│   └── settings.scss   # Personnalisations SCSS + animations
├── utils/              # Fonctions utilitaires
│   └── imageUrl.js     # Helper pour les chemins d'images
├── App.vue             # Composant racine (layout)
└── main.js             # Point d'entrée

Routing automatique : créer un fichier dans src/pages/ crée automatiquement une route. Par exemple, src/pages/favoris.vue → route /favoris.

Auto-import : ref, computed, onMounted, useRoute, useRouter sont disponibles sans import dans les <script setup>.

SCSS — qu'est-ce que c'est ?

Le fichier src/styles/settings.scss utilise SCSS (Sassy CSS), un préprocesseur CSS qui ajoute des fonctionnalités au CSS standard : variables, imbrication, mixins, etc.

Dans ce projet, SCSS est déjà configuré par Vuetify via le plugin vite-plugin-vuetify. Vous n'avez rien à installer. Le fichier settings.scss contient les personnalisations Vuetify et les animations CSS globales (comme @keyframes heartbeat).

Pour activer SCSS dans un autre projet Vite (sans Vuetify) :

npm install -D sass

C'est tout — Vite détecte automatiquement les fichiers .scss après l'installation.

Documentation : SCSS officiel · Vite + CSS

Séquences

Séq.	Thème	Étapes
1	Setup + Composants + Routes	E1 · E2 · E3 · E4 · E5
2	Pinia (state management)	E6 · E7 · E8
3	Axios + .env + mock	E9 · E10 · E11
4	Recherche, filtre, tri	E12 · E13 · E14
5	Favoris + persistance	E15 · E16 · E17
6	Formulaires + POST	E18
7	Auth + guards + suppression	E19 · E20 · E21
8	UX, responsive, polish	E22 · E23 · E24