Développement

Formation Vue 3 avancé : architecture, performance et industrialisation d'applications professionnelles

3 jour(s) • 21h

Éligible OPCO

8,8/10 avis apprenants

Description

Vue.js 3 a profondément transformé la manière de construire des applications web modernes : Composition API, reactivity réécrite, écosystème consolidé autour de Pinia et Vue Router 4, intégration native de TypeScript, outillage Vite. Pour les équipes qui ont déjà adopté le framework, l'enjeu n'est plus d'apprendre Vue mais de structurer des applications professionnelles maintenables sur la durée, de maîtriser les patterns avancés et de garantir des performances exploitables en production. Cette formation s'adresse à des développeurs déjà autonomes sur Vue.js qui souhaitent franchir un cap vers une véritable maîtrise. Elle combine l'approfondissement de la Composition API et des composables, les patterns d'architecture pour applications complexes, la gestion d'état avancée avec Pinia, l'optimisation des performances et les pratiques de test modernes. L'approche est résolument orientée pratique : chaque concept est mis en œuvre sur des scénarios représentatifs d'un environnement de développement professionnel, intégrant TypeScript, Vite, Vitest et l'écosystème Vue moderne. La formation se concentre sur Vue 3 en environnement applicatif front moderne. Les sujets Nuxt, SSR et SSG peuvent être abordés en ouverture, sans constituer le cœur du programme.

Approfondir la Composition API et la syntaxe pour structurer des composants maintenables et typés.
Comprendre le système de réactivité de Vue 3 et ses implications opérationnelles.
Concevoir des composables réutilisables pour structurer la logique applicative.
Structurer une application Vue complexe selon des patterns d'architecture éprouvés.
Maîtriser la gestion d'état avec Pinia : stores, modularité, plugins.
Mettre en œuvre Vue Router 4 avancé : guards, lazy loading, gestion des routes dynamiques.
Identifier les principaux leviers d'optimisation d'une application Vue : lazy loading, code splitting, composants asynchrones, rendu et réactivité.
Écrire des tests unitaires et de composants avec Vitest et Vue Test Utils.
Intégrer Vue dans une chaîne d'industrialisation moderne (TypeScript, Vite, CI/CD).

Développeurs front et fullstack ayant déjà pratiqué Vue.js
Lead développeurs et tech leads front
Architectes logiciels intervenant sur des applications Vue
QA engineers et automaticiens de test disposant d'une pratique réelle du code Vue

Pratique régulière de Vue.js, bases solides en Vue 3 recommandées
Maîtrise des fondamentaux : composants, props, events, directives, watchers, computed
Bonne pratique de JavaScript ES6+ (modules, destructuring, async/await, classes)
Familiarité avec TypeScript appréciée
Expérience d'un outillage moderne (Vite, npm/pnpm, Git)

1
Jour 1 / Composition API en profondeur et architecture des composants (7h)
2
Module 1 / Composition API et système de réactivité (2h30)
- Rappel positionnement Options API vs Composition API : pourquoi et quand utiliser l'une ou l'autre
- La syntaxe : structure, avantages, conventions
- ref, reactive, computed, watch, watchEffect : usage avancé et différences fondamentales
- Système de réactivité Vue 3 : Proxy, dépendances, détection des changements
- Pièges courants de la réactivité : perte de réactivité, accès direct, déstructuration
- shallowRef, shallowReactive, toRef, toRefs : cas d'usage avancés
- Cycle de vie en Composition API : onMounted, onBeforeUpdate, onUnmounted, etc.
3
Module 2 / Composables et logique réutilisable (2h)
- Principe des composables : extraire et réutiliser la logique réactive
- Conventions de nommage et structure d'un composable
- Composables avec état partagé vs état local
- Composables typés avec TypeScript : signatures, retours, génériques
- Composables courants de la communauté : VueUse, panorama et usage
- Approfondi en TP : conception d'un composable métier réutilisable
4
Module 3 / Patterns d'architecture et communication entre composants (2h30)
- Provide / Inject : injection de dépendances entre composants
- Slots avancés : nommés, scoped, dynamiques
- Composants dynamiques : keep-alive, transition, gestion du cycle de vie
- Teleport: rendre du contenu hors du flux DOM normal
- Patterns d'architecture : Smart vs Dumb components, composants headless, render functions
- TypeScript dans les composants Vue : props typées, emits typés, ref typés
5
Jour 2 / Écosystème Vue : Pinia, Vue Router et performance (7h)
6
Module 4 / Gestion d'état avancée avec Pinia (2h30)
- Pinia : positionnement, architecture, différences avec Vuex
- Stores avec setup function : exploiter pleinement la Composition API
- État, getters, actions : conventions et bonnes pratiques
- Modularité : stores multiples, communication entre stores
- Persistance d'état : plugins, localStorage, synchronisation
- Plugins Pinia: étendre les capacités du store
- Tests de stores Pinia : isolation, mocking
- Approfondi en TP : architecture d'une application multi-store avec Pinia
7
Module 5 / Vue Router 4 avancé (1h30)
- Routes dynamiques et paramètres : matching, validation, type safety
- Routes imbriquées : architecture, transitions, redirections
- Navigation guards : beforeEach, beforeEnter, beforeRouteEnter, scénarios d'authentification
- Lazy loading des routes : optimisation du bundle initial
- Meta fields et gestion des permissions
- Approfondi en TP : mise en place d'un système de routing avec authentification et lazy loading
8
Module 6 / Performance et optimisation (3h)
- Comprendre la performance d'une application Vue : rendu, reactivity, taille de bundle
- Lazy loading des composants : defineAsyncComponent
- Suspense : orchestration de composants asynchrones et gestion des états de chargement
- Code splitting et optimisation du bundle Vite : analyse, configuration
- v-memo, v-once : optimisations ciblées du rendu
- shallowRef et shallowReactive : éviter la réactivité profonde quand inutile
- Watchers et effects : éviter les exécutions inutiles, debounce et throttle
- Mesure et profiling : Vue Devtools, Performance API, Lighthouse
- Approfondi en TP : audit et optimisation d'une application Vue existante
9
Jour 3 / Tests, qualité et industrialisation (7h)
10
Module 7 / Tests unitaires et de composants avec Vitest (2h30)
- Vitest: positionnement, configuration, intégration avec Vite
- Tests unitaires de composables : isolation, assertions, mocking
- Tests de composants avec Vue Test Utils : montage, props, events, slots
- Tester les interactions utilisateur : clics, saisies, navigations
- Mocking des dépendances : stores, router, modules externes
- Bonnes pratiques : que tester, quelle granularité, comment maintenir les tests
- Approfondi en TP : suite de tests sur un composant et un composable
11
Module 8 / TypeScript dans une application Vue (1h30)
- Configuration TypeScript dans un projet Vue : tsconfig, vue-tsc
- Typage des props, emits, slots, ref, computed
- Generics dans les composants et les composables
- Typage des stores Pinia
- Patterns courants : types utilitaires, type guards, narrowing
- Erreurs courantes et stratégies de résolution
12
Module 9 / Industrialisation et déploiement (2h)
- Vite en profondeur : configuration, plugins, modes (dev, prod)
- Optimisation du bundle : analyse avec rollup-plugin-visualizer, tree-shaking
- Variables d'environnement et configuration multi-environnement
- Intégration CI/CD : lint, tests, build, déploiement (GitHub Actions, GitLab CI, Azure DevOps)
- Stratégies de versionnement et de publication
- Sécurité : Content Security Policy, gestion des dépendances, audit npm
13
Atelier final de synthèse (1h)
- Mise en perspective d'un projet Vue complet incluant composables, Pinia, Router, tests et optimisations
- Discussion ouverte sur les pratiques et défis rencontrés par les participants
- Recommandations personnalisées pour la mise en application immédiate

Ils nous font Confiance

Nos partenaires de confiance

Questions fréquentes

FAQ : Formation Vue 3 avancé : architecture, performance et industrialisation d'applications professionnelles

Oui, mais la prise en charge d'une formation professionnelle par un OPCO dépend de votre opérateur de compétences, de votre branche d'activité et des critères de financement applicables. Ascent Formation vous accompagne dans l'identification des possibilités de financement adaptées à votre entreprise.
Une formation inter-entreprises réunit des participants issus de différentes organisations, tandis qu'une formation intra-entreprise est organisée pour les collaborateurs d'une même entreprise. Le format intra permet notamment d'adapter le contenu et les modalités aux besoins spécifiques de vos équipes.
Selon la formation proposée, il est possible de suivre une formation professionnelle à distance, en présentiel ou selon d'autres modalités disponibles. Consultez les informations de la session concernée ou contactez-nous pour connaître les formats possibles.
Oui, une formation professionnelle peut être adaptée aux objectifs, au niveau des participants et aux besoins opérationnels de votre entreprise. Ascent Formation vous propose des parcours personnalisés pour accompagner le développement des compétences de vos équipes.