Téléchargez le parcours au format PDF
3 jours
Perfectionnement / Avancé
Présentiel Classe à distance
Partager
Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML, CSS et JavaScript › Vue.js 3 - Fonctionnalités avancées
Public concerné
Développeurs Vue.js souhaitant produire des applications Vue.js plus optimisées et qualitatives.
Objectifs de formation
A l'issue de cette formation, vous serez capable de :
- Décrire les aspects avancés du Vue.js
- Créer des composants plus réutilisables
- Développer une application plus optimisée.
Programme de votre formation
-
#
M2I START AVANT VOTRE FORMATION
Contextualisation du projet de formation et prise en compte des besoins de chacun
- Positionnement initial de l’apprenant par rapport aux objectifs
- Définition des priorités et des objectifs personnels de l’apprenant
- Vidéos de mise en situation
- Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
-
#
M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ¹
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
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
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)
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 (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
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 - 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
Exemples de travaux pratiques (à titre indicatif)
- 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
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 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
Exemples de travaux pratiques (à titre indicatif)
- 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
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
-
#
M2I BOOST APRÈS VOTRE FORMATION
Réactivation et consolidation des acquis en situation de travail
- 30 jours d’accompagnement personnalisé sur myM2i inclus ²
- Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
- ¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
- ² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.
Modalités, méthodes et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2I, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
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
Accessibilité de la formation
Le groupe M2I s'engage pour faciliter l'accessibilité de ses formations. Toutes nos formations sont accessibles aux personnes en situation de handicap : les détails de l'accueil des personnes sont consultables sur la page Politique Handicap.
Modalités et délais d’accès à la formation
Les formations M2I sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 11 jours ouvrés.
