Description
Objectif de formation : Permettre aux développeurs ayant une expérience pratique de Vue.js de maîtriser les pratiques avancées de Vue 3 en production — Composition API, TypeScript, Pinia, architecture frontend, tests et performance — afin de concevoir des applications robustes, maintenables et scalables dans un contexte professionnel exigeant. L'ensemble de la formation s'appuie sur la construction progressive d'une application Vue 3 de gestion de tâches collaboratives. Chaque module enrichit l'application : les participants repartent avec un projet complet, typé, testé et optimisé, directement réutilisable comme référence dans leur contexte professionnel.
Objectifs pédagogiques
- Maîtriser la Composition API et les patterns avancés de Vue 3
- Typer une application Vue 3 avec TypeScript de façon rigoureuse
- Gérer l'état applicatif de manière avancée avec Pinia
- Structurer une application Vue 3 selon une architecture frontend professionnelle
- Implémenter des patterns avancés : gestion des erreurs, async patterns, API layer
- Écrire des tests fiables avec Vitest et Vue Test Utils
- Optimiser les performances d'une application Vue 3 en production
- Sécuriser une application via l'authentification JWT
Public concerné
Développeurs frontend et fullstack avec expérience Vue.js
Développeurs Vue 2 souhaitant migrer vers Vue 3
Développeurs seniors souhaitant structurer et approfondir leurs pratiques
Chefs de projets techniques
Ingénieurs
Prérequis
Expérience pratique sur au moins un projet Vue.js (Vue 2 ou Vue 3)
Maîtrise des fondamentaux : composants, directives, réactivité de base, Vue Router
Notions de base en TypeScript recommandées
Déroulé du programme
1
Module 1 - Composition API et patterns avancés (4h)
4h
- De l'Options API à la Composition API : philosophie, avantages, migration
- script setup : syntaxe et bonnes pratiques;
- Réactivité avancée : ref, reactive, computed, watch, watchEffect - différences et pièges
- Composables : créer, structurer et réutiliser de la logique métier
- Composables asynchrones et composables avec état partagé
- provide inject : usage avancé
- Slots avancés : nommés, à portée, dynamiques
- Composants asynchrones : defineAsyncComponent, gestion des états de chargement et d'erreur
- Travaux pratiques : Initialisation du projet fil rouge sous Vite, refactoring d'un composant Options API vers Composition API avec script setup, création de composables métier (gestion de tâches, filtres, pagination)
2
Module 2 — TypeScript avec Vue 3 (3h)
3h
- Pourquoi TypeScript est incontournable en projet Vue 3 professionnel
- Typer les props avec defineProps et les emits avec defineEmits
- Typer les ref, reactive, computed et les événements
- Interfaces et types métier : modéliser les données de l'application
- Typer les composables : retours, paramètres, génériques
- Gestion des erreurs typées
- Patterns avancés : types utilitaires, guards TypeScript
- Travaux pratiques : Typage complet des composants et composables du projet fil rouge, implémentation de guards TypeScript sur les données de l'application
3
Module 3 — Gestion d'état avancée avec Pinia (3h)
3h
- Pourquoi Pinia remplace Vuex : architecture et écosystème officiel
- Définir un store : state, getters, actions — bonnes pratiques
- Stores en mode Composition API (setup stores)
- Pinia et TypeScript : typage complet d'un store complexe
- Gestion des états asynchrones : loading, error, data
- Communication entre stores et stores imbriqués
- Migration depuis Vuex : stratégie et pièges
- Travaux pratiques : Construction de trois stores Pinia typés (tâches, utilisateurs, UI state), gestion des états asynchrones, simulation d'une migration depuis un store Vuex existant
4
Module 4 — Vue Router avancé et architecture frontend (4h)
4h
- Vue Router 4 : navigation guards, routes dynamiques, nested routes
- Lazy loading et code splitting par route
- Meta-routes : gestion des permissions et des accès
- Lien entre Router et Pinia pour la gestion des accès
- Architecture frontend professionnelle : feature-based vs layer-based
- Structurer un projet Vue 3 en production : conventions et séparation des responsabilités
- API Layer : abstraire les appels HTTP, gestion centralisée des erreurs
- Async patterns avancés : gestion des race conditions, annulation des requêtes
- Travaux pratiques : Mise en place d'un routing avancé avec guards et permissions, construction d'un API layer typé avec gestion des erreurs réseau
5
Module 5 — Tests avec Vitest et Vue Test Utils (4h)
4h
- Pourquoi Vitest dans l'écosystème Vue 3 / Vite : avantages vs Jest
- Types de tests : unitaires, composants, intégration — quand utiliser quoi
- Tester des composants avec Vue Test Utils : montage, interactions, slots, props
- Tester des composables : isolation, mocks, cas asynchrones
- Tester des stores Pinia : état initial, actions, getters
- Mocker les dépendances : API, Router, modules externes
- Couverture de code : configuration et bonnes pratiques
- Travaux pratiques : Écriture d'une suite de tests complète sur le fil rouge — composants critiques, composables métier, stores Pinia et guards de navigation
6
Module 6 — Performance, sécurité et déploiement (3h)
3h
- Vite : configuration avancée, plugins essentiels, optimisation du build
- Code splitting et lazy loading : stratégies avancées
- v-once, v-memo : cas d'usage et mesure de l'impact
- Analyse du bundle : rollup-plugin-visualizer
- Vue DevTools 6+ : profiling et inspection des stores
- Authentification JWT : gestion des tokens, refresh, expiration
- Intégration avec Pinia : store d'authentification complet
- Protection des routes avec Vue Router guards
- Déploiement Vue 3 Vite : build, variables d'environnement, configuration serveur
- Travaux pratiques : Audit de performance et optimisation du bundle sur le fil rouge, implémentation d'un flux d'authentification JWT complet avec protection des routes
Informations
Durée
3 jour(s)
21h
Tarif
1500 € HT
HT
