Cours Vue.js : construire des applications avec Vue 3
Vue.js est un cours de niveau intermédiaire de 5 leçons (environ 1 h 31), avec 20 exercices et 15 questions de quiz. Prérequis : JavaScript asynchrone (promesses, fetch, API). Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 5 leçons
- 1 h 31
- 20 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous apprend à construire une application Vue 3 moderne avec la Composition API et <script setup>. Vous écrivez des composants, maîtrisez la réactivité (ref, computed, watch), faites communiquer les composants par props, événements, v-model et slots, gérez la navigation avec Vue Router et l'état partagé avec Pinia, puis testez avec Vitest. Les exercices de code portent sur la logique des composants, exécutée et vérifiée automatiquement ; les composants se construisent dans des tâches pratiques.
Ce que tu sauras faire
- Écrire des composants monofichiers avec <script setup> et la syntaxe des templates
- Utiliser ref, reactive, computed, watch et les hooks de cycle de vie sans perdre la réactivité
- Faire communiquer des composants avec props, événements, defineModel, slots et provide / inject
- Configurer Vue Router : routes dynamiques, chargement à la demande, page introuvable et gardes
- Gérer l'état partagé avec Pinia et storeToRefs, avec une persistance défensive
- Tester la logique, les stores et les composants avec Vitest et Vue Test Utils
Programme des 5 leçons
- Créer un projet Vue et écrire un composant monofichier avec <script setup>
- Utiliser l'interpolation et les directives v-bind, v-on, v-if, v-show et v-for
- Extraire la logique d'affichage dans des fonctions pures testables
Composants monofichiers (SFC)Syntaxe des templatesDirectives v-if, v-for, v-bind, v-on
- 02
Réactivité et Composition API
- Choisir entre ref et reactive et éviter les pertes de réactivité
- Dériver des valeurs avec computed et réagir aux changements avec watch
- Écrire un composable réutilisable et utiliser les hooks de cycle de vie
Réactivité (ref, reactive)computed, watch et watchEffectComposablesHooks de cycle de vie
- 03
Props, événements, v-model et slots
- Déclarer et valider des props avec defineProps et des valeurs par défaut
- Émettre des événements avec defineEmits et créer un v-model de composant avec defineModel
- Composer des composants avec les slots et partager une donnée avec provide / inject
PropsÉvénements émisv-model sur un composantSlots et provide / inject
- 04
Navigation avec Vue Router
- Déclarer des routes, des paramètres dynamiques et une page introuvable
- Naviguer avec RouterLink, useRoute et useRouter
- Protéger des pages avec des gardes de navigation et charger les pages à la demande
Vue RouterRoutes dynamiques et paramètresGardes de navigation
- 05
État partagé avec Pinia et tests
- Créer un store Pinia avec état, getters et actions
- Utiliser un store dans un composant sans perdre la réactivité (storeToRefs)
- Tester la logique, un store et un composant avec Vitest et Vue Test Utils
Projet final
Application de commande en click and collect avec Vue 3
Construisez l'application d'une épicerie fictive qui permet de parcourir un catalogue, de remplir un panier et de choisir un créneau de retrait. L'application utilise Vue 3 avec <script setup>, Vue Router (catalogue, fiche produit, panier, compte protégé, page introuvable) et Pinia (panier persistant, session). Les données proviennent d'un fichier JSON local ou d'une petite API simulée.
Livrables
- Un projet create-vue qui démarre avec npm run dev
- Des composants réutilisables (CarteProduit, SelecteurQuantite avec defineModel, Carte avec slots)
- Un routeur avec routes nommées, fiche produit dynamique, pages chargées à la demande et garde de connexion
- Des stores Pinia panier et session, le panier étant restauré de façon défensive
- Des tests Vitest pour la logique pure, les stores et au moins un composant
Critères d'évaluation
- Réactivité correcte (pas de props modifiées, pas de déstructuration sans storeToRefs)
- Valeurs dérivées en computed et effets de bord en watch
- Clés stables dans les v-for et composants découplés par props, événements et slots
- Navigation complète : paramètres convertis, page introuvable, redirection après connexion
- Tests pertinents qui passent avec npx vitest run
Questions fréquentes
Quel niveau de JavaScript faut-il pour suivre ce cours ?
Il faut maîtriser JavaScript moderne : fonctions fléchées, objets et tableaux, modules, et l'asynchrone (promesses, async/await). C'est le contenu du cours JavaScript asynchrone qui sert de prérequis.
Ce cours utilise-t-il l'Options API ou la Composition API ?
La Composition API avec <script setup>, recommandée pour les nouveaux projets Vue 3. Les notions (réactivité, props, événements) se transposent facilement si vous rencontrez l'Options API dans un projet existant.
Faut-il connaître TypeScript ?
Non. Le cours est écrit en JavaScript : à la création du projet, répondez No à la question TypeScript de create-vue (cochée par défaut). Vue s'utilise très bien avec TypeScript, que vous pourrez ajouter ensuite : les props se typent alors directement avec defineProps<…>().
Pourquoi les exercices de code ne contiennent-ils pas de composants .vue ?
Les exercices de code sont exécutés et vérifiés automatiquement sans navigateur : ils portent sur la logique des composants (calculs, filtres, gardes, stores). La construction des composants se pratique dans des tâches guidées dans votre propre projet Vue.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Vue.js » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.