Étape 5 — Transposition projet personnel

Objectif

Appliquer les concepts de la séquence 1 (composants, pages, navigation, routes dynamiques) à votre projet individuel.

Ce que vous avez appris

Concept	Pokédex	Votre projet
fetch() dans onMounted	Charger les Pokémon	Charger vos données
Grille responsive	v-row + v-col avec breakpoints	Adapter à vos données
Composant avec props	PokemonCard avec defineProps	Votre ItemCard (ou similaire)
Slot	AppFooter avec contenu par défaut	Footer ou autre composant flexible
File-based routing	favoris.vue, a-propos.vue	Vos pages
Route dynamique	pokemon/[id].vue	item/[id].vue (ou similaire)
Navigation	v-btn :to dans AppHeader	Votre menu

Checklist projet perso

Avant de quitter, vérifiez que votre projet individuel a :

• fetch() fonctionnel qui charge les données de votre API
• ≥ 3 composants (dont une carte avec defineProps)
• ≥ 3 pages avec navigation fonctionnelle
• Route dynamique /item/:id avec page de détail
• Bouton retour sur la page de détail
• Footer
• 0 erreurs dans la console
• Commit poussé sur GitHub
• Application déployée en ligne (Vercel ou GitHub Pages)

Déployer votre projet

Votre projet doit être accessible en ligne. Deux options :

Vercel (recommandé, le plus simple) :

1. Créer un compte sur vercel.com
2. Connecter votre dépôt GitHub
3. Le déploiement est automatique à chaque push

GitHub Pages :

1. Settings → Pages → Source : GitHub Actions
2. Ajouter un workflow .github/workflows/deploy.yml (voir la doc)

Après chaque séance, vérifiez que votre version en ligne fonctionne.

Prochaine séance — Pinia

La semaine prochaine, on centralisera les données dans un store Pinia pour éviter de dupliquer les appels fetch(). Préparez-vous à comprendre :

• Pourquoi un store ? (partage de données entre pages)
• state = données, getters = données calculées, actions = fonctions

Préparation oral — Concepts clés de la séquence 1

Questions que vous devez savoir expliquer :

1. Qu'est-ce qu'un composant Vue.js ? Un morceau d'interface réutilisable avec son propre template, logique et style.

2. Qu'est-ce que defineProps ? Une fonction qui déclare les données que le parent envoie à l'enfant. Les props sont en lecture seule.

3. Quelle est la différence entre useRoute() et useRouter() ? useRoute() donne les infos de la route actuelle (paramètres, chemin). useRouter() permet de naviguer (push, back).

4. Comment fonctionne le routing automatique ? Chaque fichier .vue dans src/pages/ crée automatiquement une route. Le nom du fichier = le chemin de l'URL.

5. Pourquoi <script setup> ? C'est la syntaxe Composition API de Vue 3. Plus concise, meilleure inférence de types, tout ce qui est déclaré est automatiquement disponible dans le template.

6. Qu'est-ce qu'un slot ? Un espace réservé dans un composant que le parent peut remplir avec du contenu personnalisé. Si rien n'est fourni, le contenu par défaut s'affiche.