Développement IT
Formation Vue.js
Développer des interfaces web modernes, performantes et maintenables avec le framework JavaScript Vue.js.
Format
Intra-entreprise
Durée recommandée
≈ 21 à 35 heures
Démarrage
Sous 15 jours
Sur-mesure
Programme co-construit avec le formateur
Programme révisé le
Pour qui ?
- ›Développeurs front-end ou full-stack
- ›Intégrateurs web souhaitant évoluer vers des applications dynamiques
- ›Équipes techniques en charge d’applications web ou SaaS
Prérequis
- ›Bonne maîtrise de HTML, CSS et JavaScript
- ›Connaissance des bases de la programmation (variables, fonctions, objets)
Objectifs pédagogiques
- ›Comprendre l’architecture et la philosophie de Vue.js
- ›Concevoir des composants réutilisables et structurés
- ›Gérer l’état, les événements et la communication entre composants
- ›Mettre en place un routage et une gestion de données dynamiques
- ›Optimiser les performances et la maintenabilité d’une application Vue.js
- ›Structurer un projet professionnel prêt pour la production
Programme détaillé
8 modules, construits autour de vos cas réels.
Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.
01Fondamentaux de Vue.js et réactivité
Chapitres- Situer Vue.js dans l'écosystème front-end et identifier ses cas d'usage face à React et Angular
- Comprendre le système de réactivité de Vue 3 fondé sur les Proxy et la fonction reactive
- Maîtriser la syntaxe des templates et les directives v-bind, v-model, v-if, v-for et v-on
- Manipuler les propriétés calculées avec computed et les observateurs avec watch et watchEffect
- Exploiter le cycle de vie d'un composant via les hooks onMounted, onUpdated et onUnmounted
- Mettre en application encadrée la construction d'un premier composant interactif réactif
02Composants et architecture d'application
Chapitres- Structurer un Single File Component avec ses blocs template, script et style scoped
- Déclarer et typer les props, valider leurs valeurs et définir des valeurs par défaut
- Émettre des événements personnalisés avec defineEmits pour la communication enfant vers parent
- Distribuer du contenu avec les slots nommés, les slots scopés et le contenu de repli
- Organiser un projet en composants atomiques réutilisables et hiérarchie de dossiers cohérente
03Composition API et logique réutilisable
Chapitres- Différencier l'Options API et la Composition API et choisir l'approche adaptée au projet
- Structurer la logique d'un composant avec setup, ref et reactive
- Extraire de la logique partagée dans des composables réutilisables
- Comprendre la gestion des références de template avec ref et l'accès au DOM
04Gestion d'état centralisée avec Pinia
Chapitres- Identifier les limites de l'état local et le besoin d'un store centralisé
- Définir un store Pinia avec son state, ses getters et ses actions
- Partager et muter l'état entre composants distants de l'arbre
- Gérer les actions asynchrones et la persistance de l'état dans un store
- Construire des formulaires contrôlés avec validation et retour d'erreur utilisateur
- Mettre en application encadrée la structuration d'un module fonctionnel piloté par un store
05Routing et navigation avec Vue Router
Chapitres- Configurer Vue Router et déclarer les routes d'une application monopage
- Créer des routes dynamiques avec paramètres et routes imbriquées
- Déclencher une navigation programmatique avec router.push et router.replace
- Sécuriser l'accès aux vues avec les guards beforeEach et beforeEnter
- Organiser les vues, les layouts partagés et le chargement différé des routes
06Consommation d'API et gestion asynchrone
Chapitres- Réaliser des appels HTTP avec fetch et axios depuis un composant ou un composable
- Gérer les promesses et le flux asynchrone avec async et await
- Traiter les états de chargement, de succès et d'erreur dans l'interface
- Centraliser les appels dans une couche de services API réutilisable
07Qualité, tests et performance
Chapitres- Appliquer des conventions de nommage et de structuration du code Vue
- Factoriser la logique répétée et limiter le couplage entre composants
- Optimiser le rendu avec le lazy loading des composants et le découpage du bundle
- Écrire des tests unitaires et de composants avec Vitest et Vue Test Utils
- Diagnostiquer la réactivité et les performances avec Vue Devtools
08Industrialisation et mise en production
Chapitres- Configurer un projet avec Vite et comprendre son serveur de développement
- Gérer les variables d'environnement pour les contextes dev, staging et production
- Produire un build optimisé et analyser le poids des assets générés
- Sécuriser le rendu côté client contre les injections et l'exposition de données
- Définir une méthode de déploiement et de maintenance évolutive de l'application
Moyens & supports pédagogiques
- Accueil des stagiaires
- Supports de formation projets
- Apports théoriques et pratiques
- Études de cas concrets
- Auto-positionnement
- Accès en ligne aux ressources
Évaluation & suivi des acquis
Feuille de présence
Émargement des stagiaires en présentiel ou à distance, via support papier ou signature électronique.
Émargement sécurisé
Signatures électroniques collectées en ligne et conservées dans un coffre-fort numérique sécurisé par Dendreo.
Auto-positionnement
Évaluation du niveau des stagiaires en début et en fin de formation pour mesurer la progression.
Évaluations pédagogiques
Validation des acquis par des questions orales ou écrites tout au long de la formation.
Mises en situation
Exercices pratiques et cas concrets pour ancrer les compétences dans la réalité métier.
Attestation de fin de formation
Remise d'une attestation officielle à l'issue de la formation.
Délai d’accès
Sous 15 jours après validation du devis
Accessibilité PSH
Adaptations possibles en situation de handicap. En savoir plus
Questions fréquentes
Ce que les entreprises demandent avant de se lancer.
Faut-il migrer un projet Vue 2 avant de suivre la formation ?
Non. La formation porte sur Vue 3, la seule version maintenue par l'équipe Vue. Vue 2 a atteint sa fin de vie le 31 décembre 2023 et ne reçoit plus ni évolutions ni correctifs de sécurité, hors offres de support commercial tierces. Une équipe qui maintient encore une base Vue 2 peut au contraire cadrer la session intra autour de la migration : passage à la Composition API, remplacement de Vuex par Pinia, bascule de l'outillage vers Vite.Comment Vue.js est-il utilisé en entreprise aujourd'hui ?
Vue équipe des produits à forte charge : GitLab construit toute son interface avec Vue et Pinia, et le framework reste un choix courant pour les back-offices, les dashboards SaaS et les outils internes, où sa courbe d'apprentissage douce accélère la montée en compétence des équipes. Pour les sites publics qui exigent du rendu côté serveur et un bon référencement, l'écosystème s'appuie sur Nuxt, le méta-framework construit sur Vue. Côté moteur, l'équipe Vue développe Vapor, un mode de compilation optionnel qui supprime le DOM virtuel composant par composant et rapproche les performances de celles de Solid ou Svelte, sans réécriture de la logique existante.La formation couvre-t-elle Nuxt et le rendu côté serveur ?
Le programme standard cible une application monopage Vue 3 avec Vue Router, Pinia et Vite, le socle de la majorité des projets d'entreprise. Si votre équipe travaille sur un site public où le SSR et le SEO comptent, la session intra peut intégrer un volet Nuxt : routage par fichiers, rendu serveur ou hybride, déploiement. Ce périmètre se précise lors de l'entretien de positionnement, comme le volume horaire.
Prochaine étape
Construire votre formation Vue.js
Un échange de 20 minutes suffit pour cadrer vos enjeux et la session. Devis personnalisé sous 48h, démarrage sous 15 jours.
- Réponse sous 24h ouvrées
- 01 85 71 00 29
Pour aller plus loin
