EduGroupe accompagne les entreprises dans leurs projets de formation liée aux technologies informatiques
Formation Vue.js – Fonctionnalités avancées
- Référence : DEVU002
- Durée : 14 heures
- Certification : Non
- Eligible CPF : Non
CONNAISSANCES PREALABLES
- Avoir des connaissances sur Vue.js.
PROFIL DES STAGIAIRES
- Cette formation Vue.js s'adresse aux développeurs Vue.js souhaitant produire des applications Vue.js plus optimisées et qualitatives
OBJECTIFS
- Décrire les aspects avancés du Vue.js
- Créer des composants plus réutilisables
- Développer une application plus optimisée
METHODES PEDAGOGIQUES
- 6 à 12 personnes maximum par cours, 1 poste de travail par stagiaire
- Remise d’une documentation pédagogique papier ou numérique pendant le stage
- La formation est constituée d’apports théoriques, d’exercices pratiques et de réflexions
METHODES D'EVALUATION DES ACQUIS
- Auto-évaluation des acquis par le stagiaire via un questionnaire
- Attestation de fin de stage adressée avec la facture
FORMATEUR
Consultant-Formateur expert Développement
CONTENU DU COURS Développement
1 - Jour 1
2 - Approfondissement de Vue Router
- Chargement dynamique des composants
- Le mode "historique"
- La configuration server-side
- Les paramètres d’URL
- Routes imbriquées / Nested routes
- Navigation par le code
- Redirection
- Gestion d’erreur
- Flash message
- La pagination
- Les gardes
3 - Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre des routes Vue.js dans l’application
- Intégration d’appels de composants de manière asynchrones dans l’application écrite
4 - Les slots
- Définition et utilité des slots
- Injection de contenu dans un template
- Slots et composants génériques
- Slots et composants parents
- Props et slots
- La directive v-slot
- Les slots nommés
- La portée des slots
- Les slots à nom dynamique
5 - Exemples de travaux pratiques (à titre indicatif)
- Utilisation des slots pour réaliser un composant dont le contenu dépend de sa position dans la page (composant générique)
- Ajout de chargement lazy pour des routes référençant des composants sur le projet existant
- Création d’un store de données d’état avec Vuex dans l’application en cours et mise à jour des données
- Mise en oeuvre d’un test avec Jest
6 - Les composants asynchrones
- Utilité de composants asynchrones
- Chargement des composants à la demande
- La fonction "defineAsyncComponent"
- Retour sur les promises
- Gestion des erreurs et de l’état
8 - Jour 2
9 - Vuex et Pinia
- Définition du modèle de gestion d’état (state management pattern)
- Vuex ou Pinia ?
- Un seul stockage par application
- Exemple de stockage le plus élémentaires
- Gestion de l’état Vuex dans les composants
- Les getters
- Les mutations d’état (modifications)
- Les commits
- Gestion des actions
- Différence avec Pinia
11 - Test avec Vue.js
- Pourquoi tester les applications Vue.js
- Les différents types de test
- Tester uniquement avec Vue.js
- Les frameworks à disposition (Jest…)
13 - La performance
- Le code splitting
- Pourquoi le lazy loading est important dans Vue.js
- Le chargement à la demande
- Chargement lazy des routes avec "dynamic import"
- Les directives v-once et v-memo
14 - Vuex et authentification
- Schéma de l’authentification
- Authentifier avec un Token
- JWT (JSON Web Token)
- Connexion / déconnexion
