A l’issue de la formation, l’apprenant sera capable de :
Connaître les cycles de vie d’un composant
Maîtriser Pinia
Réaliser des Tests unitaires
- Développement
- Développement web
Formation Vue.js Avancé Version 3
Objectifs
Prérequis
Bonne connaissance de JavaScript
Avoir suivi la formation ‘Vue.js Développement d’applications Web ou connaissances équivalentes’
Un entretien en amont avec notre expert permet de prendre en compte le profil de chaque participant (niveau, objectifs et résultats attendus, contexte professionnel, enjeux…) et d’adapter le contenu de la formation si besoin
Cette formation ne peut être financée que dans le cadre d’un projet d’entreprise (prise en charge entreprise ou OPCO). Les dossiers à financement personnel et CPF ne sont pas pris en compte.
Public
Développeurs
Dernière mise à jour
Programme mis à jour le 29 novembre 2024
Bon à savoir
Evaluez votre niveau
Pour vous aider à bien choisir votre formation, nous vous proposons soit un entretien avec le formateur soit un test d’évaluation. Cela vous assurera que vous disposez des connaissances nécessaires pour suivre la formation dans des conditions optimales.
Sessions garanties
La majorité de nos sessions proposées en distanciel sont garanties. Elles peuvent être enregistrées à la demande.
Travaux pratiques
Nos formations comprennent de nombreux travaux pratiques pour un meilleur apprentissage (60 % de pratique). Nous proposons également de travailler sur vos données pour une meilleure expérience.
Les Modules
de formation
Module1
Introduction à la formation Vue.js Avancé
● Présentation des objectifs et de l’approche pédagogique
● Récapitulatif des concepts fondamentaux de Vue.js
○ Anatomie d’un composant : props, state, events
○ Arbre des composants et communication
○ Cycles de vie et appels asynchrones
● Présentation de l’environnement et des outils modernes
○ Vite, SWC, Volar, et Devtools Vue.js
Travaux pratiques
● Configuration d’un projet avancé avec Vite et mise en place des outils nécessaires
Module2
Composants avancés et optimisation des performances
● Composants asynchrones :
○ Chargement à la demande, gestion des erreurs, et transitions
● Utilisation avancée des slots :
○ Slots nommés, slots avec scope
● Optimisation des performances :
○ Utilisation de v-once et v-memo
○ Lazy loading des images et composants
● Création de composants dynamiques avec defineAsyncComponent
Travaux pratiques
● Implémentation de composants asynchrones et réutilisables avec transitions complexes
Module3
Gestion d’État avec Pinia et TanStack Query
● Pinia :
○ Configuration avancée des stores
○ Modularisation et optimisation des performances
○ Utilisation des plugins pour enrichir les fonctionnalités
● TanStack Query :
○ Mise en cache intelligente et réhydratation des données
○ Pagination, polling, et chargement infini
○ Gestion fine des états de requêtes (loading, error, success)
Travaux pratiques
● Gestion de données asynchrones et état global avec Pinia et TanStack Query
Module4
Routage avancé avec Vue Router
● Gestion des transitions entre les routes
● Guards avancés :
○ Guards globaux, spécifiques aux composants, ou par route
○ Mise en place de routes protégées pour l’authentification
● Navigation programmatique et gestion de l’historique du navigateur
● Lazy loading des routes et optimisation des performances
Travaux pratiques
● Implémentation d’un routage sécurisé et dynamique dans une application Vue
Module5
Création de composables et directives personnalisées
● Création de composables réutilisables :
○ Partager la logique entre plusieurs composants
○ Gestion avancée des effets avec watchEffect et onUnmounted
● Directives personnalisées :
○ Étendre les fonctionnalités de Vue.js
○ Exemple : lazy loading d’images ou gestion d’autorisations
● Structuration avancée pour une réutilisabilité optimale
Travaux pratiques
● Développement d’un set de composables et directives personnalisées
Module6
Validation et composants de formulaire réutilisables
● Création de composants de formulaire réutilisables :
○ Utilisation de slots et de props dynamiques
○ Extension des composants de base
● Validation avancée avec Vuelidate :
○ Gestion des erreurs de formulaire et retour utilisateur
○ Validation conditionnelle et asynchrone
Travaux pratiques
● Développement d’un système de formulaire complet avec validation et réutilisabilité
Module7
Tests avancés avec Vitest et Cypress
● Tests unitaires et intégration avec Vitest :
○ Mocking et stubbing avec Vue Test Utils et MSW
○ Tester les événements, les appels API, et les dépendances externes
● Tests end-to-end avec Cypress :
○ Scénarios avancés pour valider les interactions utilisateur
○ Automatisation des tests pour le flux complet de l’application
● Stratégie de tests complète et couverture de code avec Stryker
Travaux pratiques
● Mise en place d’un pipeline de tests automatisés avec Vitest et Cypress
Module8
Mise en production et déploiement avancé
● Optimisation des bundles pour la production :
○ Code splitting, tree-shaking, minification
● Configuration du serveur et gestion des environnements
● Déploiement avec CI/CD :
○ Automatisation des builds et déploiements avec GitHub Actions
○ Hébergement sur Netlify, Vercel, ou AWS
● Monitoring des performances en production avec Sentry
Travaux pratiques
● Déploiement d’une application Vue complète avec CI/CD et monitoring
Module9
Internationalisation avec i18n
● Bases de l’internationalisation avec Vue i18n :
○ Utilisation de fichiers statiques pour les traductions
● Gestion des langues dynamiques :
○ Chargement à la demande des fichiers de traduction
● Intégration des ressources dans les composants et l’interface
Travaux pratiques
● Ajout d’un système d’internationalisation dans une application Vue
Module10
Architectures complexes et applications évolutives
● Présentation d’architectures avancées :
○ Applications modulaires et extensibles
○ Gestion des micro-frontends avec Vue
● Interface de création de pages :
○ Système de drag-and-drop de composants
○ Génération dynamique d’interfaces utilisateur
● Implémentation de DDD (Domain-Driven Design) dans une application Vue
Travaux pratiques
● Développement d’une application Vue évolutive avec une architecture modulaire
Module11
Rendu Côté Serveur (SSR) avec Nuxt.js
● Introduction au Server-Side Rendering et ses avantages (SEO, performances)
● Structure de projet et rendu universel avec Nuxt.js
● Préchargement des données côté serveur avec asyncData et fetch
● Hydratation côté client et gestion des erreurs
Travaux pratiques
● Développement d’une application SSR avec Nuxt.js
Module12
TypeScript Avancé avec Vue.js
● Typage des composants : props, emits, slots fortement typés
● Utilisation de la Composition API avec des types avancés
● Gestion des erreurs et des types pour les appels API
● Création de composants réutilisables avec TypeScript
Travaux pratiques
● Intégration de TypeScript avancé dans une application Vue.js
Les prochaines
sessions de formation
Sur demande
Vous souhaitez organiser cette formation à une date spécifique ?Contactez-nous en remplissant le formulaire ci-dessous
25 novembre 2024
27 janvier 2025
24 mars 2025
12 mai 2025