Vue.js avancé

Développeurs ayant déjà des connaissances en Vue.js

• Maîtriser les techniques avancées de Vue.js
• Améliorer la qualité, les performances et la gestion des erreurs dans une application Vue.js
• Gérer le routage, les états et l'internationalisation de manière efficace
• Développer des composants avancés avec des animations, transitions et directives personnalisées

Jour 1 — Chargement asynchrone, gestion des erreurs et routage

Suspense et chargement asynchrone (1h)

• Gestion du chargement asynchrone avec Vue.js
• Utilisation de Suspense pour gérer les composants asynchrones
• Mise en place d'un fallback pour les erreurs de chargement

Gestion des erreurs (1h)

• Introduction à la gestion des erreurs dans Vue.js avec onErrorCaptured
• Comparaison avec onMounted pour une meilleure gestion des erreurs
• Utilisation de onErrorCaptured avec script setup

Routage avancé avec Vue Router (2h)

• Chargement à la demande des composants avec Vue Router
• Utilisation de Suspense pour gérer le routage asynchrone
• Optimisation de la gestion du routage dans les applications Vue.js
• Routing dynamique et gestion des erreurs de routage

Pause déjeuner (1h)

Gestion d'état avec Pinia (2h)

• Introduction à Pinia et pourquoi passer de Vuex à Pinia
• Création et gestion d'un store avec Pinia (store simple + actions)
• Utilisation des patterns « store » et « flux »
• Exemples de gestion d'état dans des applications complexes avec Pinia
• Discussion sur l'intérêt et la gestion d'un store dans des applications Vue avancées

Travaux pratiques (1h)

• Mise en place d'un store Pinia avec gestion d'une API et connexion avec le router

Jour 2 — Composants avancés, animations, transitions et internationalisation

Animations et transitions avancées (2h)

• Introduction aux animations CSS dans Vue.js
• Gestion des transitions d'entrée et de sortie pour les composants
• Animation des listes avec des transitions dynamiques
• Création de transitions personnalisées pour les composants

Composants avancés et patterns (2h)

• Création de composants réutilisables et maintenables
• Utilisation de références de template et de composants
• Gestion des valeurs, arguments et modificateurs dans les directives personnalisées
• Approfondissement du cycle de vie des composants dans Vue.js

Pause déjeuner (1h)

Internationalisation avec vue-i18n (2h)

• Introduction à vue-i18n pour l'internationalisation d'une application Vue.js
• Traduction des textes dans l'application et gestion des messages
• Paramétrage des messages, pluralisation et changement de locale
• Formatage des données et bonnes pratiques pour l'internationalisation

Travaux pratiques (1h)

• Implémentation de la gestion des langues dans un projet Vue (traduction, changement de locale, formatage)

Une attestation de participation sera transmise aux participants