Formation Vue.js

Mise à jour : 2024
60 heures
Projets
Quiz

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

368 avis

3 280

inscrits

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 extrêmement modulaire, offrant la possibilité d'utiliser uniquement certaines parties de la librairie, puis d'ajouter d'autres fonctionnalités au fur et à mesure des besoins. Cette flexibilité permet à Vue.js de s'intégrer facilement dans des vues d'une application serveur existante ou de gérer l'ensemble de la logique d'une Single Page Application (SPA).

Ce framework se distingue par sa polyvalence, offrant une architecture plus libre que celle d'Angular, tout en étant plus structuré que React. Vue.js est souvent reconnu comme le plus accessible des trois principaux frameworks front-end, tout en étant suffisamment complet et performant pour répondre aux exigences des applications web modernes. Il constitue un excellent choix pour s'initier au développement d'applications front-end réactives.

Comparé à React, Vue.js permet également l'utilisation de composants réactifs et réutilisables avec une syntaxe simple, populaire et facile à comprendre. Les deux frameworks partagent de nombreuses optimisations, telles que l'utilisation du DOM virtuel, mais Vue se distingue par son caractère progressif. En effet, Vue.js est composé de plusieurs librairies que vous pouvez ajouter à votre application en fonction des besoins spécifiques, ce qui en fait un framework progressif.

Parmi les librairies phares de Vue.js, on trouve Pinia pour la gestion de l'état et vue-router pour la création de routes au sein de votre application. Ces outils contribuent à faire de Vue.js un choix idéal pour développer des applications web performantes et évolutives.

Les prérequis pour suivre cette formation

Des connaissance en HTML & CSS sont nécessaires.
Des connaissance 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çons 01:08:57
- Environnement GNU/Linux
- Environnement macOS
- Environnement Windows
- À l'abordage
- Qu'est ce que Vue ?
- SPA, create-vue et Vite
Chapitre 2 : Création de notre première application Vue
6 leçons 01:27:57
- Comment fonctionne Vue ?
- Vue.js sans Vite
- La librairie create-vue
- Architecture initiale
- Les API composition et options
- Création d'un composant
Chapitre 3 : Intéragir avec le DOM
7 leçons 01:43:01
- Directive v-html
- Les évènements natifs
- Introduction aux directives
- Utilisation de fonctions
- Les modificateurs d'événements
- Liaison de propriété avec v-bind
- Notions de base TypeScript
Chapitre 4 : Rendre les composants réactifs
7 leçons 02:03:06
- La fonction reactive()
- La directive v-model
- La fonction watch()
- Introduction à la réactivité
- La fonction ref()
- La fonction computed()
- La fonction watchEffect()
Chapitre 5 : Le style et les classes
4 leçons 00:55:41
- Utilisation de Sass
- La liaison de classes
- La liaison de styles
- Introduction et portée des styles
Chapitre 6 : Les directives structurelles
5 leçons 01:04:13
- Affichage conditionnel avec les directives v-if, v-else et v-else-if
- La directive v-for
- Directive v-for, détection des changements et combinaison avec v-if
- Les directives v-show et v-pre
- Les directives v-once et v-memo
Chapitre 7 : Les bases des composants
8 leçons 02:45:01
- 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çons 03:41:13
- 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çons 02:47:57
- 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çons 01:38:55
- 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çons 03:25:32
- 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çons 01:10:56
- Introduction et requête AJAX
- Requêtes POST
- Requêtes GET et DELETE
- Requêtes PATCH
Chapitre 13 : Composants natifs
4 leçons 01:12:53
- Introduction aux composants natifs
- Le composant KeepAlive
- Le composant Teleport
- Le composant Suspense
Chapitre 14 : Projet boutique - partie 3
6 leçons 01:53:23
- 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çons 01:23:48
- Introductions aux composables
- Utilisation d'un composable asynchrone
- Création de directives personnalisées
- Les plugins
Chapitre 16 : Les animations
4 leçons 01:10:36
- Introduction aux animations
- Les bases des transitions
- Transitions entre plusieurs éléments
- Le composant TransitionGroup
Chapitre 17 : Projet boutique - partie 4
6 leçons 02:22:13
- 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çons 03:07:01
- 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çons 01:33: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çons 02:38:58
- 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çons 01:35:32
- 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çons 01:01:22
- 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çons 02:51:32
- 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çons 02:32:17
- 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çons 01:30:10
- 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çons 02:19:02
- 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.

Évaluations et avis sur la formation Vue

4.9

368 avis

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.Étudiant(e) vérifié(e)
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.Étudiant(e) vérifié(e)
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.Étudiant(e) vérifié(e)

Ces entreprises offrent cette formation à leurs collaborateurs

Questions fréquemment posées sur la formation Vue

À quoi sert Vue.js ?

Vue.js est un framework JavaScript moderne, conçu pour le développement d'applications réactives et dynamiques. Il permet de créer des interfaces utilisateur flexibles, que ce soit pour des Single Page Applications (SPA) ou des sites web plus complexes. Grâce à sa structure modulaire, Vue.js facilite la gestion des composants et l'évolution progressive de l'application, ce qui en fait un choix privilégié pour les développeurs.

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

Oui, cette formation Vue.js est idéale pour les débutants. Elle commence par une introduction aux bases de Vue.js 3, y compris l'utilisation de Vue CLI et Vite pour configurer votre environnement de développement. Progressivement, vous apprendrez des concepts avancés comme la gestion des composants, l'état avec Pinia, et la navigation avec Vue Router. Des connaissances de base en JavaScript, HTML, et CSS sont nécessaires pour suivre cette formation.

La formation est-elle en ligne ou en présentiel ?

Cette formation Vue.js est entièrement en ligne, vous permettant d'apprendre à votre propre rythme. Les cours sont accessibles depuis n'importe quel appareil, à tout moment. Chaque module comprend des ressources pratiques et des projets concrets pour vous aider à appliquer immédiatement ce que vous avez appris.

Quelles compétences vais-je acquérir grâce à cette formation en ligne ?

Maîtrise des composants Vue.js, des templates, et des liaisons de données.
Gestion de la navigation avec Vue Router pour créer des Single Page Applications performantes.
Gestion avancée de l'état des applications avec Pinia dans l'écosystème Vue.js.
Développement d'interfaces utilisateur réactives et optimisées en utilisant Vite pour des performances accrues.
Déploiement d'applications Vue.js complètes, de la phase de développement à la mise en production.

La formation Vue.js est-elle à jour avec les dernières versions ?

Oui, cette formation Vue.js est régulièrement mise à jour pour inclure les dernières fonctionnalités et bonnes pratiques de Vue.js 3. Vous apprendrez à utiliser les outils les plus récents de l'écosystème Vue.js, vous assurant de rester à jour avec les technologies actuelles.

Y a-t-il des travaux pratiques dans la formation Vue.js ?

Absolument, cette formation Vue.js comprend de nombreux travaux pratiques pour renforcer vos compétences. Vous travaillerez sur plusieurs projets, comme la création d'une boutique en ligne, où vous développerez une application complète avec Vue.js. Ces exercices pratiques vous permettront de manipuler des API REST, de gérer les composants et l'état de l'application, tout en rendant votre application réactive et responsive.

Comment cette formation Vue.js m'aidera-t-elle dans ma carrière ?

Maîtriser Vue.js vous ouvrira de nombreuses opportunités professionnelles en tant que développeur front-end ou full-stack. Vue.js est l'un des frameworks JavaScript les plus demandés dans le développement d'applications web modernes. Cette formation vous dotera des compétences nécessaires pour travailler sur des applications variées, allant des Single Page Applications (SPA) aux sites web d'entreprise.

Le contenu de la formation Vue.js est-il suffisant pour un projet complet ?

Absolument, cette formation Vue.js est conçue pour vous guider étape par étape dans la création d'applications web dynamiques et performantes en utilisant Vue.js. Vous apprendrez à construire des interfaces utilisateur complexes, en utilisant des outils modernes comme Vue Router et Pinia. Les projets pratiques inclus vous permettront de développer des applications complètes tout en suivant les meilleures pratiques de l'écosystème Vue.js.