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
Mis à jour 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
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
