Développement

Formation Vue.js - Avancé

3 jour(s) • 21h

Éligible OPCO

8,8/10 avis apprenants

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.

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

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

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

1
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)
2
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
3
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
4
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
5
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
6
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

Ils nous font Confiance

Nos partenaires de confiance

Questions fréquentes

FAQ : Formation Vue.js - Avancé

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.