Vue.js 3 - Fonctionnalités avancées

Jour 1

Approfondissement de Vue Router

• Présentation détaillée des fonctionnalités avancées de Vue Router
• Utilisation du mode "historique" et configuration server-side
• Gestion des paramètres d'URL et des routes imbriquées
• Navigation par le code et redirection
• Gestion des erreurs et affichage des messages flash
• Implémentation de la pagination
• Utilisation des gardes pour sécuriser les routes

Exemples de travaux pratiques (à titre indicatif)

• Créer une application Vue.js qui utilise Vue Router pour gérer la navigation entre différentes pages
• Mettre en place un système de pagination pour afficher une liste d'articles ou de produits
• Utiliser les gardes de navigation pour restreindre l'accès à certaines pages en fonction de l'état de l'utilisateur

Les slots

• Exploration approfondie des slots dans Vue.js 3
• Définition et utilité des slots
• Injection de contenu dans un template en utilisant les slots
• Utilisation des slots pour rendre les composants plus génériques et réutilisables
• Interaction entre les composants parents et les composants enfants via les slots
• Utilisation des props avec les slots
• Introduction à la directive v-slot et utilisation des slots nommés
• Compréhension de la portée des slots dans les composants Vue.js
• Utilisation des slots à nom dynamique pour une plus grande flexibilité dans la composition des composants

Exemples de travaux pratiques (à titre indicatif)

• Créer un composant de mise en page flexible qui utilise des slots pour afficher du contenu dynamique (en-tête, contenu principal, pied de page)
• Utiliser les slots nommés pour permettre aux utilisateurs de personnaliser l'apparence du composant en fonction de leurs besoins

Les composants asynchrones

• Présentation détaillée de l'importance et de l'utilisation des composants asynchrones dans Vue.js 3
• Utilisation de la fonction defineAsyncComponent pour charger les composants à la demande
• Gestion des erreurs et de l'état lors du chargement asynchrone des composants

Exemples de travaux pratiques (à titre indicatif)

• Modifier une application existante pour charger certains composants de manière asynchrone en utilisant la fonction defineAsyncComponent
• Gérer l'état de chargement et les erreurs lors du chargement asynchrone des composants

Jour 2

Vuex et Pinia

• Comparaison approfondie entre Vuex et Pinia dans le contexte de Vue.js 3
• Avantages et cas d'utilisation de chaque solution
• Création d'un store de données d'état avec Vuex dans une application Vue.js 3
• Exemple d'implémentation similaire avec Pinia et démonstration des différences

Exemples de travaux pratiques (à titre indicatif)

• Créer un store Vuex ou Pinia pour gérer l'état global d'une application
• Utiliser les getters, mutations et actions pour effectuer des opérations sur l'état global depuis les composants de l'application
• Mettre en place des modules Vuex ou des stores Pinia pour organiser le code de l'application de manière modulaire
• Ecrire des tests unitaires pour les composants Vue.js en utilisant Jest
• Tester les méthodes, les propriétés calculées et les événements émis par les composants
• Utiliser les mocks pour simuler des dépendances externes et isoler les composants pendant les tests

La performance

• Explication approfondie des améliorations de performance apportées par Vue.js 3
• Code splitting amélioré et chargement à la demande
• Utilisation des directives v-once et v-memo pour optimiser le rendu des composants
• Intégration du lazy loading des routes avec "dynamic import" pour améliorer les performances de chargement

Exemples de travaux pratiques (à titre indicatif)

• Optimiser le chargement des routes en utilisant le lazy loading avec "dynamic import"
• Utiliser les directives v-once et v-memo pour réduire le nombre de rendus inutiles dans les composants
• Mesurer les performances de l'application avant et après l'optimisation pour évaluer l'impact des changements sur la vitesse de chargement et l'expérience utilisateur

Les "Portals" et "Teleports"

• Présentation approfondie des concepts de "Portals" et "Teleports" dans Vue.js 3
• Utilisation de "Teleport" pour rendre des composants à l'extérieur de l'arbre DOM de l'application
• Implémentation de Portals pour un rendu à un autre emplacement de l'arbre DOM

Exemples de travaux pratiques (à titre indicatif)

• Créer un composant modal réutilisable qui utilise "Portal" pour rendre son contenu à l'extérieur de l'arbre DOM de l'application
• Utiliser "Teleport" pour placer le composant modal à un emplacement spécifique de l'interface utilisateur, tel qu'une modale globale au-dessus de l'application

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation