Apres avoir acquis les bases de Vue.js 3, cette formation vous apprend a developper des applications plus performantes et mieux structurees. Vous decouvrirez le SSR avec Nuxt 3, l’optimisation via le code splitting et le lazy loading, ainsi que les patterns avances de composants. Ces techniques sont essentielles pour les applications Vue.js en production qui doivent offrir une experience utilisateur fluide.
Public visé
Développeurs Vue.js souhaitant produire des applications plus optimisées et de meilleure qualité.
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Décrire les aspects avancés de Vue.js
- Créer des composants plus réutilisables
- Développer des applications optimisées
Programme
Jour 1 - Matin
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
- SSR avec Nuxt 3 (middleware de routing)
- Réécriture d’URL sur Netlify / Vercel (routes statiques)
- 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 de navigation pour sécuriser les routes
Travaux pratiques
- 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
Jour 1 - Après-midi
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
- Slot Redux : création de composants “Headless UI” avec l’API Component + Slot (technique avancée de composition de composants sans rendu spécifique)
Travaux pratiques
- 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 (avec importation dynamique) et du composant pour charger les composants à la demande
- Gestion des erreurs et de l’état lors du chargement asynchrone des composants
Travaux pratiques
- 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 - Matin
Pinia
- Comparaison approfondie entre Vuex et Pinia dans le contexte de Vue.js 3
- Présentation de Pinia, la solution officielle de gestion d’état global pour Vue.js 3 (successeur de Vuex)
- Principaux avantages de Pinia et différences par rapport à Vuex (API simplifiée, absence de mutations, support de TypeScript…)
- Mise en place et configuration d’un store Pinia dans une application Vue.js 3
- Organisation de l’état global en plusieurs stores Pinia pour structurer l’application de manière modulaire
Travaux pratiques
- Créer un store Pinia pour gérer l’état global d’une application
- Utiliser les getters et actions de Pinia pour manipuler l’état global depuis les composants de l’application
- Mettre en place plusieurs stores Pinia pour organiser le code de l’application de manière modulaire
- Ecrire des tests unitaires pour les composants Vue.js en utilisant Vitest et Vue Test utils v3
- 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 optimisé et chargement à la demande
- Utilisation des directives v-once et v-memo, ainsi que de la mémoïsation réactive via computed() pour optimiser le rendu des composants
- Intégration du chargement paresseux (lazy loading) des routes avec dynamic import() pour améliorer les performances de chargement
Travaux pratiques
- 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 afin d’évaluer l’impact des changements sur la vitesse de chargement et l’expérience utilisateur
Jour 2 - Après-midi
Les “Portals” et “Teleports”
- Présentation du concept de Teleport dans Vue.js 3 et de son utilité pour afficher des composants en dehors de l’arborescence DOM principale de l’application
- Mise en oeuvre de Teleport : utilisation de l’attribut to pour spécifier la cible du rendu dans le DOM (par exemple vers la balise de la page)
- Cas d’utilisation typiques de Teleport (fenêtres modales globales, info-bulles contextuelles…) afin de détacher certains composants de la structure principale sans perturber le style ou le comportement de l’application
Travaux pratiques
- Créer un composant de type modale réutilisable qui utilise Teleport pour rendre son contenu en dehors de l’élément racine de l’application
- Utiliser Teleport pour placer ce composant modale à un emplacement spécifique de la page, par exemple directement sous la balise afin de le superposer à l’application principale
Modalités d’évaluation des acquis
En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
Formation DEV-VUEJS-200 — Vue.js 3 - Fonctionnalités avancées. Domaine : Développement. Niveau : Intermédiaire. Durée : 2 jours (14 heures). Mots-clés : vuejs, javascript, frontend, pinia, nuxt, perfectionnement. Cylian Formation, Dijon.