Vue.js - Avancé

Formation créée le 01/04/2026.
Version du programme : 2

Type de formation

Distanciel

Durée de formation

21 heures (3 jours)

Vue.js - Avancé


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 de la formation

  • 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

Profil des bénéficiaires

Pour qui
  • 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

Contenu de la formation

Module 1 - Composition API et patterns avancés (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)
Module 2 — TypeScript avec Vue 3 (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
Module 3 — Gestion d'état avancée avec Pinia (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
Module 4 — Vue Router avancé et architecture frontend (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
Module 5 — Tests avec Vitest et Vue Test Utils (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
Module 6 — Performance, sécurité et déploiement (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

Équipe pédagogique

Professionnel expert technique et pédagogique.

Suivi de l'exécution et évaluation des résultats

  • Espace intranet de formation
  • Documents supports de formation
  • Exposés théoriques
  • Études de cas concrets
  • Mise à disposition en ligne de documents supports à la suite de la formation

Ressources techniques et pédagogiques

  • Émargement numérique
  • Mises en situation
  • Formulaires d’évaluation de la formation
  • Certificat de réalisation de l’action de formation

Qualité et satisfaction

Taux de satisfaction des apprenants, nombre d'apprenants, taux et causes des abandons, taux de retour des enquêtes, taux d'interruption en cours de prestation...