Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Maîtrisez Vue.js 3 – Formation la plus complète [2026]

Name: Maîtrisez Vue.js 3 – Formation la plus complète [2026]
Rating: 4.6 (129 reviews)

Je couvre avec vous 100% de la documentation Vue.js (Composition & Option API) via des cours suivi de projets concrets !

Created byThibault Chazottes Laravel | Vue.js | Formateur | CDA & DWWM

Last updated 3/2026

French

French [Auto],

What you'll learn

Créer un composant Vue JS de qualité
Maîtriser toute la documentation et la base de Vue JS
Découper une application web en sous composants
Développer des interfaces dynamiques et modernes avec la réactivité
Comprendre et utiliser les hooks de cycle de vie des composants
Bien utiliser les 3 types de données: props, data et computed
Développer un composant Vue JS en Option API
Développer un composant Vue JS en Composition API
Créer des composants ré-utilisables
Développer des plugins Vue JS
Communiquer entre les composants avec props et événements
Utiliser les transitions et animations pour améliorer l'expérience utilisateur
Optimiser les performances des applications Vue JS
Mettre en œuvre les meilleures pratiques pour écrire du code maintenable

Course content

8 sections • 117 lectures • 15h 27m total length

Introduction1:56
Présentation de Vue.js part 1/25:24
Présentation de Vue.js part 2/26:47
Option API ou Composition API ?6:32
Environnement8:00
Single-File Component (SFC)8:52
Vue Devtools2:05

Objectifs et points de la doc qu'on va étudier3:47
Utiliser les data, la syntaxe de template et le rendu de liste7:51
Point doc 1/4: Data et Réactivité4:35
Point doc 2/4: Template Syntax4:46
Point Doc 3/4: Conditional Rendering4:42
Point Doc 4/4: List Rendering5:14
TP 1.1 - Étape 1: Code part 1/3 (Option API)6:59
TP 1.1 - Étape 1: Code part 2/3 (Option API)5:37
TP 1.1 - Étape 1: Code part 3/3 (Option API)1:55
Utiliser les données computed, les methods et le class binding8:52
TP 1.2 - Point doc 1/3: Methods3:29
TP 1.2 - Point doc 2/3: Computed8:31
TP 1.2 - Point doc 3/3: Class Binding5:27
TP 1.2 - Etape 2: Code (Option API)8:27
TP 1.2 - Etape 2: Code (Composition API)1:13
Premier bilan4:56
Quizz
Exercice n°1 : Page panier d'un site e-commerce1:06
Correction exercice n°1 Option API 1/4 - Affichage du tableau8:29
Correction exercice n°1 Option API 2/4 - Gestion total prix d'un produit4:25
Correction exercice n°1 Option API 3/4 - Total du panier3:53
Correction exercice n°1 Option API 4/4 - Fin8:07

Objectif et points de la doc qu'on va étudier3:16
Enregistrer un sous-component & utiliser les props et les slots10:33
Point Doc 1/3 : Components Basics12:31
Point Doc 2/3 : Component Registration11:55
Point Doc 3/3 : Props8:52
TP 2.1 - Création de Product.vue11:57
TP 2.2 - Amélioration du code Product.vue11:08
Notre component Product.vue fonctionne bien, mais il mérite d'être amélioré.
Nous allons typer les props et indiquer lesquelles sont requises ou non, et si il y a des valeurs par défaut.
Aussi, nous allons permettre au parent de customiser la couleur du component quand celui-ci est le prix le moins cher.
Utiliser les slots1:01
Point Doc: Slots15:11
TP 2.3 - Création de Rating.vue (1/2)9:17
TP 2.3 - Création de Rating.vue (2/2)9:04
TP 2.4 - Utilisation pertinente des slots pour Rating.vue7:07
Deuxième bilan5:05
Quizz
Exercice n°2: Découpage du panier en sous composants0:40
Correction exerce n°2 Option API 1/3 - Création de CartProduct9:44
Correction exerce n°2 Option API 2/3 - Bonne utilisation des props4:36
Correction exerce n°2 Option API 3/3 - Gestion des slots3:04

Objectifs et points de la doc qu'on va étudier4:37
Utiliser les v-model pour le Form Input Binding3:11
Point Doc - Form Input Bindings11:58
TP 3.1 - Création ProductsFilter.vue avec les v-model sur le formulaire9:38
TP 3.2 - Filtrer par stock et ordonner par nom et prix11:48
TP 3.2bis - Correction bug sur l'écriture des props3:52
Point doc - Event Handling13:08
TP 3.3 - Recherche par nom sur les produits15:05
Point Doc - Component Events10:18
TP 3.4 - Relation bi-directionnelle entre ProductsFilter et Products (1/2)7:34
TP 3.4 - Relation bi-directionnelle entre ProductsFilter et Products (2/2)8:38
Point Doc: Components v-model14:45
TP 3.5 - v-model sur ProductsFilter.vue8:19
Utiliser les watchers et API Storage pour sauvegarder le choix des filtres5:19
Point Doc - Watchers (1/2)14:17
Point Doc - Watcher (2/2)11:33
Point Doc JS - API HTML5 Storage8:18
TP 3.6 - watchers et sessionStorage sur ProductsFilter10:44
Bilan4:21
Exercice n°3 - Dynamisation du panier0:29
Correction exercice n°3 - Option API - gestion de la quantité (1/3)12:06
Correction exercice n°3 - Option API - Component v-model sur la quantité (2/3)11:54
Correction exercice n°3 - Option API - Suppression d'un produit (3/3)10:54

Objectifs et points de la doc qu'on va étudier5:33
Point Doc - LifeCycle Hooks - Introduction (1/3)11:48
Point Doc - LifeCycle Hooks - Les hooks principaux (2/3)9:43
Point Doc - LifeCycle Hooks - Autres hooks et conclusion (3/3)2:47
Point Doc JS - Promesses, Fetch et l'asynchrone26:54
TP 4.1 - Fetch sur products.json et Gestion de l'asynchrone (1/2)9:18
TP 4.1 - Fetch sur products.json et Gestion de l'asynchrone (2/2)8:53
Utiliser les templates refs et expose pour reset le filtre depuis un parent2:42
Points Doc - Template refs16:39
TP 4.2 - Ref sur ProductsFilter et expose de la fonction reset()7:08
Bilan5:58
Quizz
Exercice n°4 - Web api sur le panier0:57
Correction exercice n°4 - Option API - étape 1 LifeCycle et fetch11:57
Correction exercice n°4 - Option API - étape 2 max quantité avec template refs9:15

Objectifs et points de la doc qu'on va étudier4:38
Point Doc - KeepAlive et la mise en cache11:16
TP 5.1 - ProductDetailModal avec KeepAlive et son cache (1/2)10:33
TP 5.1 - ProductDetailModal avec KeepAlive et son cache (2/2)11:03
Point Doc - Transition et TransitionGroup (1/2)15:55
Point Doc - Transition et TransitionGroup (2/2)5:13
TP 5.2 - Animations de notre page Products.vue avec les Transition7:53
Point Doc - Teleport7:15
TP 5.3 - Utilisation de Teleport avec notre ProductDetailModal.vue3:25
Point Doc - Provide et Inject7:42
TP 5.4 - Injection de max depuis Products.vue sur ses petits fils Ratings.vue7:55
Point Doc - Fallthrough Attributes9:27
Point Doc - Async Component6:30
Bilan2:44
Quizz
Exercice n°5 - Ajout de produits sur le panier depuis une modal0:21
Correction exercice n°5 - Option API - (1/3)13:56
Correction exercice n°5 - Option API - (2/3)9:18
Correction exercice n°5 - Option API - (3/3)12:45

Objectifs et points de la doc qu'on va étudier2:48
Point Doc - Composable et la factorisation16:50
TP 6.1 - Développement du composable useCart.js pour gérer le panier25:03
Point Doc - Custom Directive5:34
TP 6.2 - Utilisation de la custom directive v-highlight10:01
Point Doc - Plugin et la création de librairies5:37
TP 6.3 - Création et utilisation du plugin notify.js7:55
Bilan3:04
Quizz
Exercice n°6 - Réutilisabilité dans notre panier0:16
Correction exercice n° 6 - Option Api - 1/3 - Composable useDiscount12:05
Correction exercice n° 6 - Option Api - 2/3 - Directive vTooltip9:08
Correction exercice n° 6 - Option Api - 3/3 - Plugin analytics7:43

Requirements

C'est un cours pour débutant Vue JS, par contre il est pertinent de connaître un minimum Javascript

Description

Cette formation complète sur Vue.js 3 couvre en profondeur toute la documentation officielle du framework. Que vous soyez débutant ou développeur expérimenté, ce cours vous guide à travers tous les concepts fondamentaux et avancés de Vue.js 3. Vous apprendrez à maîtriser le framework via des travaux pratiques, des exercices interactifs et des corrections détaillées.

Mon engagement est de vous faire voir et apprendre tous les points abordés par le guide officiel de Vue.js.

Je suis développeur web sénior depuis 2013 et formateur depuis 2019, où je forme des bac+2 et bac+3 pendant 18 mois au métier de développeur.

Méthodologie de la formation

La formation est structurée autour de six travaux pratiques (TP) successifs, chacun se concentrant sur des fonctionnalités spécifiques de Vue.js 3.

Voici comment nous procédons :

Introduction et développement progressif
Chaque TP commence par une introduction théorique sur un sujet précis de Vue.js 3.
Immédiatement après, nous passons à la pratique en développant les fonctionnalités discutées.
Corrections en Option API et Composition API
Toutes les corrections sont fournies dans deux versions : Option API et Composition API.
Vous pourrez ainsi comprendre et comparer les deux approches, renforçant votre expertise.
Exercices et pratique
À la fin de chaque section, vous aurez un exercice à réaliser pour pratiquer les points abordés.
Nous corrigeons ces exercices ensemble, toujours en fournissant des solutions en Option API et en Composition API.

Ce cours comprend des quiz interactifs pour vous aider à valider vos compétences après chaque section !

Contenu du cours

Bases de Vue.js 3 : installation, configuration et structure d’un projet Vue.js
Composants : création, utilisation et communication via props et événements
Gestion de l’état local : data, computed properties, méthodes et watchers
Directives et syntaxe de template : v-bind, v-model, v-for, v-if…
Cycle de vie des composants et utilisation des hooks
Réactivité et gestion des événements DOM
Styles et animations : transitions et animations CSS
Réutilisabilité et factorisation du code pour un projet maintenable
Optimisation et bonnes pratiques pour des performances optimales
Composition API et Option API : maîtrise et comparaison des deux approches

Cette formation vous permettra non seulement de comprendre Vue.js 3 en profondeur, mais aussi de l’appliquer de manière efficace et pragmatique dans vos projets.

Si vous souhaitez aller plus loin, mon cours sur Vue Router & Pinia vous permettra d’apprendre à gérer la navigation et l’état global de vos applications Vue.js. N'hésitez-pas à regarder sur ma page profil :)

Note importante : ce cours est volontairement enseigné en JavaScript (sans TypeScript) afin de se concentrer pleinement sur l’apprentissage de Vue.js 3. Ce choix permet une progression plus fluide, notamment pour les développeurs découvrant le framework.

(Une version TypeScript ou un cours dédié pourra être proposé ultérieurement pour aller encore plus loin)

Who this course is for:

Développeur web qui veut apprendre à développer sous le framework Vue JS

Maîtrisez Vue.js 3 – Formation la plus complète [2026]

What you'll learn

Explore related topics

Course content

Introduction7 lectures • 40min

TP1 - Liste de produits d'un site e-commerce21 lectures • 1hr 52min

TP2 - Utilisation de deux sous-components - Product et Stars17 lectures • 2hr 15min

TP3 - Filtre des données et formulaires23 lectures • 3hr 33min

TP4 - Web API et asynchrone14 lectures • 2hr 10min

TP5 - Les compléments de la doc18 lectures • 2hr 28min

TP6 - La réutilisation12 lectures • 1hr 46min

S8 - Autres5 lectures • 44min

Requirements

Description

Who this course is for: