Retour aux formations
Développement
Vue 3 avancé : architecture, performance et industrialisation d'applications professionnelles
3 jour(s) • 21h
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.
Objectifs pédagogiques
- Approfondir la Composition API et la syntaxe <script setup> 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).
Public concerné
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
Prérequis
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)
Déroulé du programme
1
Jour 1 / Composition API en profondeur et architecture des composants (7h)
7h
2
Module 1 / Composition API et système de réactivité (2h30)
2h
3
• Rappel positionnement Options API vs Composition API : pourquoi et quand utiliser l'une ou l'autre
4
• La syntaxe <script setup>: structure, avantages, conventions
5
• ref, reactive, computed, watch, watchEffect : usage avancé et différences fondamentales
6
• Système de réactivité Vue 3 : Proxy, dépendances, détection des changements
7
• Pièges courants de la réactivité : perte de réactivité, accès direct, déstructuration
8
• shallowRef, shallowReactive, toRef, toRefs : cas d'usage avancés
9
• Cycle de vie en Composition API : onMounted, onBeforeUpdate, onUnmounted, etc.
10
Module 2 / Composables et logique réutilisable (2h)
2h
11
• Principe des composables : extraire et réutiliser la logique réactive
12
• Conventions de nommage et structure d'un composable
13
• Composables avec état partagé vs état local
14
• Composables typés avec TypeScript : signatures, retours, génériques
15
• Composables courants de la communauté : VueUse, panorama et usage
16
• Approfondi en TP : conception d'un composable métier réutilisable
17
Module 3 / Patterns d'architecture et communication entre composants (2h30)
2h
18
• Provide / Inject : injection de dépendances entre composants
19
• Slots avancés : nommés, scoped, dynamiques
20
• Composants dynamiques : keep-alive, transition, gestion du cycle de vie
21
• Teleport: rendre du contenu hors du flux DOM normal
22
• Patterns d'architecture : Smart vs Dumb components, composants headless, render functions
23
• TypeScript dans les composants Vue : props typées, emits typés, ref typés
24
Jour 2 / Écosystème Vue : Pinia, Vue Router et performance (7h)
7h
25
Module 4 / Gestion d'état avancée avec Pinia (2h30)
2h
26
• Pinia : positionnement, architecture, différences avec Vuex
27
• Stores avec setup function : exploiter pleinement la Composition API
28
• État, getters, actions : conventions et bonnes pratiques
29
• Modularité : stores multiples, communication entre stores
30
• Persistance d'état : plugins, localStorage, synchronisation
31
• Plugins Pinia: étendre les capacités du store
32
• Tests de stores Pinia : isolation, mocking
33
• Approfondi en TP : architecture d'une application multi-store avec Pinia
34
Module 5 / Vue Router 4 avancé (1h30)
1h
35
• Routes dynamiques et paramètres : matching, validation, type safety
36
• Routes imbriquées : architecture, transitions, redirections
37
• Navigation guards : beforeEach, beforeEnter, beforeRouteEnter, scénarios d'authentification
38
• Lazy loading des routes : optimisation du bundle initial
39
• Meta fields et gestion des permissions
40
• Approfondi en TP : mise en place d'un système de routing avec authentification et lazy loading
41
Module 6 / Performance et optimisation (3h)
3h
42
• Comprendre la performance d'une application Vue : rendu, reactivity, taille de bundle
43
• Lazy loading des composants : defineAsyncComponent
44
• Suspense : orchestration de composants asynchrones et gestion des états de chargement
45
• Code splitting et optimisation du bundle Vite : analyse, configuration
46
• v-memo, v-once : optimisations ciblées du rendu
47
• shallowRef et shallowReactive : éviter la réactivité profonde quand inutile
48
• Watchers et effects : éviter les exécutions inutiles, debounce et throttle
49
• Mesure et profiling : Vue Devtools, Performance API, Lighthouse
50
• Approfondi en TP : audit et optimisation d'une application Vue existante
51
Jour 3 / Tests, qualité et industrialisation (7h)
7h
52
Module 7 / Tests unitaires et de composants avec Vitest (2h30)
2h
53
• Vitest: positionnement, configuration, intégration avec Vite
54
• Tests unitaires de composables : isolation, assertions, mocking
55
• Tests de composants avec Vue Test Utils : montage, props, events, slots
56
• Tester les interactions utilisateur : clics, saisies, navigations
57
• Mocking des dépendances : stores, router, modules externes
58
• Bonnes pratiques : que tester, quelle granularité, comment maintenir les tests
59
• Approfondi en TP : suite de tests sur un composant et un composable
60
Module 8 / TypeScript dans une application Vue (1h30)
1h
61
• Configuration TypeScript dans un projet Vue : tsconfig, vue-tsc
62
• Typage des props, emits, slots, ref, computed
63
• Generics dans les composants et les composables
64
• Typage des stores Pinia
65
• Patterns courants : types utilitaires, type guards, narrowing
66
• Erreurs courantes et stratégies de résolution
67
Module 9 / Industrialisation et déploiement (2h)
2h
68
• Vite en profondeur : configuration, plugins, modes (dev, prod)
69
• Optimisation du bundle : analyse avec rollup-plugin-visualizer, tree-shaking
70
• Variables d'environnement et configuration multi-environnement
71
• Intégration CI/CD : lint, tests, build, déploiement (GitHub Actions, GitLab CI, Azure DevOps)
72
• Stratégies de versionnement et de publication
73
• Sécurité : Content Security Policy, gestion des dépendances, audit npm
74
Atelier final de synthèse (1h)
1h
75
• Mise en perspective d'un projet Vue complet incluant composables, Pinia, Router, tests et optimisations
76
• Discussion ouverte sur les pratiques et défis rencontrés par les participants
77
• Recommandations personnalisées pour la mise en application immédiate
Informations
Durée
3 jour(s)
21h
Tarif
Sur demande
