Formation Vue.js

Mise à jour : novembre 2026
60 heures
Projets
Quiz
Essai gratuit 7 jours

100 % en ligne, en vidéo et en français · accès annuel à 350 € · sans CPF ni dossier : accès immédiat · certificat de réussite délivré par Dyma

Vue.js est un framework JavaScript progressif, idéal pour créer des interfaces utilisateur réactives et évolutives. Il se distingue par sa simplicité et sa flexibilité, facilitant l'intégration dans des projets de toutes tailles.

4,9

note moyenne

3 280

apprenants

Les notions abordées dans la formation

Maîtrisez les bases de Vue.js : apprenez à utiliser create-vue, les templates et les directives pour construire des applications modernes.
Développez des applications interactives en comprenant les interactions avec le DOM et en rendant vos composants réactifs avec ref() et reactive().
Accélérez le développement avec Vite : exploitez la puissance de Vite pour des temps de compilation ultra-rapides et un rafraîchissement instantané des modules.
Gérez l’état de vos applications avec Pinia et optimisez les performances de vos composants grâce à des fonctionnalités avancées comme provide et inject.
Simulez la navigation multi-pages dans vos applications avec Vue Router et améliorez l'expérience utilisateur avec des transitions fluides.
Déployez vos projets Vue.js en production, de la configuration du serveur à la gestion des bases de données, tout en assurant une sécurité maximale avec JWT.
Testez et validez vos applications avec Vitest et Cypress, garantissant des fonctionnalités robustes et fiables avant le déploiement final.
Apprenez à gérer les formulaires de manière avancée avec VeeValidate et Zod pour garantir des données utilisateur précises et sécurisées.

Qu’est-ce que Vue.js ?

Vue.js est un framework JavaScript open source pour construire des interfaces web, créé par Evan You et publié en 2014. Une interface Vue se découpe en composants, qui réunissent dans un même fichier leur gabarit HTML, leur logique et leur style. Quand les données changent, Vue met à jour l’affichage de lui-même : c’est la réactivité.

Vue est dit progressif : il peut animer une partie d’une page existante, ou porter toute une application monopage (SPA) avec ses bibliothèques officielles, Vue Router pour la navigation et Pinia pour l’état partagé. Les projets se créent avec create-vue et se construisent avec Vite.

Vue 3, API Options et API Composition

Un composant Vue 3 s’écrit de deux façons : avec l’API Options, historique, qui range données, méthodes et propriétés calculées dans des options, ou avec l’API Composition, qui les déclare avec des fonctions comme ref() et computed() et dont la logique se partage en composables. La formation présente les deux, puis travaille avec la seconde.

Pour qui est cette formation ?

Pour les développeurs qui connaissent HTML, CSS et JavaScript et veulent construire des applications web modernes, pour les développeurs back-end qui veulent un front-end réactif, et pour ceux qui viennent de React ou d’Angular et veulent découvrir Vue. Nuxt, le framework de rendu côté serveur bâti sur Vue, n’est pas traité.

Les prérequis pour suivre cette formation

Des connaissances en HTML & CSS sont nécessaires.
Des connaissances en JavaScript sont nécessaires.

Obtenez un certificat de réussite

Pour chaque formation que vous accomplirez, vous obtiendrez une certification que vous pourrez partager sur LinkedIn.

Projets réalisés pendant la formation

Nous mettrons en pratique toutes les fonctionnalités de Vue3 et Pinia pour créer une boutique e-commerce avec gestion du panier. Nous utiliserons Pinia, Zod et Vee-validate, et plein d'autres librairies !

Plan de la formation

Afficher tout

Chapitre 1 : Introduction à Vue
6 leçons01:09:45
- À l'abordage
- Qu'est ce que Vue ?
- SPA, create-vue et Vite
- Environnement Windows
- Environnement GNU/Linux
- Environnement macOS
Chapitre 2 : Création de notre première application Vue
6 leçons01:28:05
- La librairie create-vue
- Architecture initiale
- Comment fonctionne Vue ?
- Les API composition et options
- Création d'un composant
- Vue.js sans Vite
Chapitre 3 : Intéragir avec le DOM
7 leçons01:42:33
- Introduction aux directives
- Directive v-html
- Liaison de propriété avec v-bind
- Utilisation de fonctions
- Notions de base TypeScript
- Les évènements natifs
- Les modificateurs d'événements
Chapitre 4 : Rendre les composants réactifs
7 leçons02:02:56
- Introduction à la réactivité
- La fonction reactive()
- La fonction ref()
- La fonction computed()
- La directive v-model
- La fonction watch()
- La fonction watchEffect()
Chapitre 5 : Le style et les classes
4 leçons00:55:31
- Introduction et portée des styles
- La liaison de classes
- La liaison de styles
- Utilisation de Sass
Chapitre 6 : Les directives structurelles
5 leçons01:03:56
- Affichage conditionnel avec les directives v-if, v-else et v-else-if
- Les directives v-show et v-pre
- La directive v-for
- Directive v-for, détection des changements et combinaison avec v-if
- Les directives v-once et v-memo
Chapitre 7 : Les bases des composants
8 leçons02:44:45
- Introduction aux composants
- Composants locaux et globaux
- Les props
- Validation des props et utilisation de TypeScript
- Les événements
- Le cycle de vie d'un composant
- Les références de template
- Utilisation des liaisons et des directives sur les composants
Chapitre 8 : Projet Boutique - partie 1
12 leçons03:39:02
- Initialisation du projet
- Mise en place du style
- Mise en page globale
- Mise en page boutique et panier
- Mise en page du header et du footer
- Mise en page de la partie Shop
- Mise en place du panier
- Utilisation des props pour les produits
- Ajout d'un produit dans le panier
- Affichage et suppression pour la partie panier
- Gestion des quantités
- Affichage du total et affichage initial du panier
Chapitre 9 : Les fonctionnalités avancées des composants
9 leçons02:45:52
- Introduction au chapitre
- Utilisation de la directive v-model sur des composants
- Cascade d'attributs
- Présentation des slots
- Portées des slots
- Provide et Inject
- Utilisation des symboles avec provide et inject
- Les fonctions utilitaires de l'API réactivité
- Les composants asynchrones
Chapitre 10 : Projet boutique - partie 2
6 leçons01:37:17
- Introduction et objectifs
- Préparation pour le filtrage des produits
- Création du composant ShopFilters
- Filtrer les produits par prix
- Filtrer les produits par catégorie
- Reset des filtres
Chapitre 11 : Les formulaires avec Vee-validate et Zod
11 leçons03:21:16
- Introduction aux formulaires, à VeeValidate et à Zod
- Introduction à VeeValidate
- Introduction à Zod
- Valeurs initiales et handlechange()
- Validations croisées et asynchrones
- L'objet meta
- Les setters
- Soumission du formulaire
- Autres options lors de l'envoi d'un formulaire
- Formatage des données
- Ajout dynamique de champs
Chapitre 12 : HTTP
4 leçons01:07:55
- Introduction et requête AJAX
- Requêtes POST
- Requêtes GET et DELETE
- Requêtes PATCH
Chapitre 13 : Composants natifs
4 leçons01:12:16
- Introduction aux composants natifs
- Le composant KeepAlive
- Le composant Teleport
- Le composant Suspense
Chapitre 14 : Projet boutique - partie 3
6 leçons01:51:12
- Introduction des fonctionnalités
- Navigation à l'aide d'un composant dynamique
- Mise en place du formulaire
- Envoi du formulaire
- Récupération des produits
- Amélioration du CSS
Chapitre 15 : Composables, directives et plugins
4 leçons01:20:30
- Introductions aux composables
- Utilisation d'un composable asynchrone
- Création de directives personnalisées
- Les plugins
Chapitre 16 : Les animations
4 leçons01:08:31
- Introduction aux animations
- Les bases des transitions
- Transitions entre plusieurs éléments
- Le composant TransitionGroup
Chapitre 17 : Projet boutique - partie 4
6 leçons02:16:45
- Introduction des fonctionnalités
- Connexion des filtres
- Mise en place de la pagination
- Header responsive
- Panier pour le mobile
- Amélioration des filtres
Chapitre 18 : Vue-router
11 leçons03:03:05
- Introduction au Router de Vue
- Création et mise en place de routes
- Paramètres dynamiques
- Navigation programmatique, hash et query
- Redirect, props, meta et alias
- Vues du Router nommées
- Routes imbriquées
- Les gardes
- Récupération de données
- Animations lors de la navigation
- Scroll et lazy loading
Chapitre 19 : Projet boutique - partie 5
6 leçons01:31:29
- Présentation des fonctionalités
- Mise en place du router-view principal
- Mise en place de la navigation imbriquée admin
- Affichage de la liste des produits dans la partie admin
- Suppression des produits
- Edition des produits
Chapitre 20 : Pinia
9 leçons02:32:47
- Introduction à Pinia
- Initialisation du Store
- Utilisation des getters
- Modification du State
- Exemple d'action
- Utiliser les props et les événements avec Pinia
- Les actions asynchrones
- Exemple avancé de getter Pinia
- Réinitialiser le Store, observer les actions et les modifications de l'état
Chapitre 21 : Projet boutique partie 6
5 leçons01:30:53
- Introduction des fonctionnalités
- Mise en place du cartStore
- Mise en place du productStore
- Mise en place de l'adminProductStore
- Utilisation des Stores avec le Router
Chapitre 22 : Mise en production d'une application Vue
5 leçons00:55:47
- Presentation de la stack MEVN
- Création de l'application Vue et Express
- Configuration d'Atlas
- Création du VPS sur OVH
- Utilisation de Github et mise en production
Chapitre 23 : Gestion de l'authentification avec JWT
11 leçons02:44:51
- Fonctionnement de l'authentification avec JWT
- Base du code et installation des dépendances
- Mise en place du Header
- Mise en place du formulaire d'inscription
- Validation du formulaire d'inscription
- Service pour la création de l'utilisateur
- API Express pour la création de l'utilisateur
- Implémentation du formulaire de connexion
- API Express pour la connexion de l'utilisateur
- Récupération de l'utilisateur
- Mise en place de la déconnexion
Chapitre 24 : Vitest
9 leçons02:25:35
- Introduction aux tests
- Mise en place de Vitest
- Les fonctions describe(), test() et it()
- La fonction expect() et les matchers
- Les tests asynchrones
- Préparation et nettoyage
- Les fonctions simulées
- Les modules simulés
- Les dates simulées
Chapitre 25 : Test-utils et test de Pinia
5 leçons01:27:47
- Introduction à test-utils
- La fonction mount() et les méthodes du wrapper
- Les tests asynchrones
- Tester un composant avec un plugin (Pinia)
- Tester un store Pinia
Chapitre 26 : Cypress
8 leçons02:09:48
- Introduction à Cypress
- Les librairies mocha et chai
- Sélections des éléments
- Détails sur les assertions should
- Les actions Cypress
- Autres actions Cypress
- Les fixtures
- La méthode intercept() plus en détail

Également inclus dans cette formation

Vite

Vite, développé par Evan You, optimise le chargement des applications web en réduisant la taille des fichiers et en améliorant les performances. Spécialement conçu pour Vue.js, Vite est l'outil parfait pour créer des applications modernes, rapides et légères.
Pinia

Pinia, la librairie de gestion d'état pour Vue.js, simplifie la complexité croissante des applications front-end. Intégrée de manière fluide à Vue.js, Pinia vous permet de maîtriser efficacement l'état de vos applications dynamiques.
Vue Router

Vue Router est l'outil indispensable pour gérer la navigation dans vos applications Vue.js. Ce module essentiel de Vue.js vous permet de créer des routes fluides et réactives, garantissant une expérience utilisateur optimale.

Vos formateurs

Quentin de Vial
Dix ans à enseigner le code, deux ans à enseigner l’IA. Co-créateur de Dyma, il vient de la conception de produits et suit de près ce que les agents changent au métier de développeur.
LinkedIn
Erwan Vallée
Co-créateur de Dyma, dix ans de code enseigné et deux ans d’IA. Il vient de l’architecture et de la mise en production, et défend une idée simple : on n’apprend l’IA qu’en construisant avec elle.
LinkedIn

Dyma est un organisme indépendant, non affilié aux éditeurs des outils enseignés.

Évaluations et avis sur la formation Vue.js

4,9

note moyenne des apprenants

La formation Vue.js m'a permis de comprendre ce framework en profondeur. Les explications sont précises et les projets, comme la création d'une boutique en ligne, m'ont aidé à mettre en pratique les concepts de manière concrète. Je recommande vivement cette formation à tous ceux qui souhaitent maîtriser Vue.js.
Sophie M.Compte étudiant vérifié
J'ai vraiment apprécié cette formation Vue.js. Le formateur a su rendre les notions complexes accessibles, comme la réactivité avec ref() et reactive(). Grâce à cette formation, je me sens maintenant capable de développer des applications Vue.js performantes.
Alexandre T.Compte étudiant vérifié
Cette formation Vue.js est extrêmement bien structurée. Les sections sur les composants et le routing m'ont permis de renforcer mes compétences. Les exercices pratiques sont excellents et permettent d'appliquer immédiatement les notions apprises. Idéale pour ceux qui cherchent à aller plus loin avec Vue.js.
Elena R.Compte étudiant vérifié

Ces entreprises offrent cette formation à leurs collaborateurs

Questions fréquemment posées sur la formation Vue.js

La formation Vue.js est-elle accessible aux débutants ?

Aux débutants en Vue, oui : elle part de l’installation et de la première application. Pas aux débutants en programmation : il faut connaître HTML, CSS et JavaScript, que Vue suppose acquis. Les formations HTML et CSS et JavaScript sont incluses dans l’abonnement.

Quelle version de Vue est enseignée ?

Vue 3, avec les composants natifs KeepAlive, Teleport et Suspense, Vue Router et Pinia. Vue 2 n’est plus maintenu depuis le 31 décembre 2023 et n’est pas traité.

Faut-il connaître TypeScript ?

Non. La formation en présente les notions de base au moment où elles servent, pour typer les props et les composants. Pour aller plus loin, la formation TypeScript est incluse dans l’abonnement.

Vue.js, React ou Angular ?

Les trois construisent des interfaces par composants. Vue a une syntaxe proche du HTML et s’adopte progressivement ; React est une bibliothèque autour de laquelle on assemble son propre outillage ; Angular est un framework complet et plus structuré, très présent dans les grandes entreprises. Ce qui compte d’abord, c’est de bien connaître JavaScript : ce que vous apprenez avec Vue se transpose aux deux autres.

La formation traite-t-elle les tests ?

Oui, en trois chapitres : les tests unitaires avec Vitest, les tests de composants et de stores Pinia avec Vue Test Utils, et les tests de bout en bout avec Cypress.

Apprend-on à mettre une application Vue en production ?

Oui. Un chapitre déploie une application MEVN (MongoDB, Express, Vue et Node.js), avec sa base hébergée sur MongoDB Atlas, sur un serveur privé virtuel (VPS) depuis GitHub. Un autre met en place l’authentification par jetons JWT, côté Vue et côté API.

Y a-t-il des travaux pratiques ?

Oui. Le projet fil rouge est une boutique en ligne construite en six parties : catalogue et panier, filtres et pagination, formulaire, espace d’administration, puis stores Pinia. Une application de tâches sert de terrain aux tests.

La formation est-elle en ligne, et en français ?

Oui. La formation est entièrement en ligne, en vidéo et en français, avec des quiz tout au long des chapitres. Vous la suivez à votre rythme, sur ordinateur ou sur téléphone.

Que faire après la formation Vue.js ?

Construire vos propres API avec la formation Node.js, ou conteneuriser votre projet avec la formation Docker.

Puis-je suivre toutes les leçons avec mon abonnement ?

Oui. Pendant votre abonnement actif, vous pouvez consulter toutes les leçons de cette formation et de l’ensemble du catalogue en ligne, sans quota. Les crédits de téléchargement servent uniquement à la consultation hors connexion.

Combien coûte la formation Vue.js ?

La formation Vue.js est incluse dans l’abonnement Dyma, qui donne accès à l’ensemble des formations. L’abonnement annuel coûte 350 € pour douze mois. Deux autres formules offrent le même accès : 250 € pour six mois ou 100 € par mois sans engagement. Les formules de six et douze mois sont payables en une fois ou au moyen d’une facilité de paiement en trois échéances par carte, sans frais ni intérêts. Le calendrier exact des débits, la fin d’accès et le renouvellement sont présentés avant la confirmation du paiement.

La formation Vue.js est-elle finançable (CPF, OPCO) ?

Non, la formation Vue.js n’est finançable ni par le CPF ni par un OPCO : Dyma n’est pas un organisme certifié Qualiopi. Nous avons fait le choix d’un prix bas et d’un accès immédiat, sans dossier de financement à monter. Pour les équipes, l’abonnement peut être pris en charge directement par votre entreprise dans le cadre de notre offre dédiée.

Nos derniers articles sur Vue.js

Nos étudiants ont également suivi

S’inscrire avec une adresse email

Leçon 1 et 7 jours d’essai (carte demandée) · 350 €/an ou 100 €/mois

4,4/5 sur Trustpilot · 410 avis

26 chapitres
178 leçons
357 quiz
7 exercices pratiques
Version 3.5
Un certificat de réussite
Adapté pour les téléphones