03 20 61 95 06

Formation Vue.js Avancé Version 3


  • VJS23
  • Durée : 3 jours
  • Tarif : 2400 € HT

96%

Taux de satisfaction clients
(sur 1596 évaluations du 19/05/21 au 16/12/24)

Voir les avis

Objectifs

A l’issue de la formation, l’apprenant sera capable de :
Connaître les cycles de vie d’un composant
Maîtriser Pinia
Réaliser des Tests unitaires

Certification

Prérequis

Bonne connaissance de JavaScript
Avoir suivi la formation ‘Vue.js Développement d’applications Web ou connaissances équivalentes’
Un entretien en amont avec notre expert permet de prendre en compte le profil de chaque participant (niveau, objectifs et résultats attendus, contexte professionnel, enjeux…) et d’adapter le contenu de la formation si besoin
Cette formation ne peut être financée que dans le cadre d’un projet d’entreprise (prise en charge entreprise ou OPCO). Les dossiers à financement personnel et CPF ne sont pas pris en compte.

Public

Développeurs

Dernière mise à jour

Programme mis à jour le 29 novembre 2024
enveloppe Cette formation vous intéresse ? Contactez-nous

Bon à savoir

Evaluez votre niveau

Pour vous aider à bien choisir votre formation, nous vous proposons soit un entretien avec le formateur soit un test d’évaluation. Cela vous assurera que vous disposez des connaissances nécessaires pour suivre la formation dans des conditions optimales.

Sessions garanties

La majorité de nos sessions proposées en distanciel sont garanties. Elles peuvent être enregistrées à la demande.

Travaux pratiques

Nos formations comprennent de nombreux travaux pratiques pour un meilleur apprentissage (60 % de pratique). Nous proposons également de travailler sur vos données pour une meilleure expérience.
modules

Les Modules
de formation

Module1
Introduction à la formation Vue.js Avancé
● Présentation des objectifs et de l’approche pédagogique
● Récapitulatif des concepts fondamentaux de Vue.js
○ Anatomie d’un composant : props, state, events
○ Arbre des composants et communication
○ Cycles de vie et appels asynchrones
● Présentation de l’environnement et des outils modernes
○ Vite, SWC, Volar, et Devtools Vue.js
Travaux pratiques
● Configuration d’un projet avancé avec Vite et mise en place des outils nécessaires
Module2
Composants avancés et optimisation des performances
● Composants asynchrones :
○ Chargement à la demande, gestion des erreurs, et transitions
● Utilisation avancée des slots :
○ Slots nommés, slots avec scope
● Optimisation des performances :
○ Utilisation de v-once et v-memo
○ Lazy loading des images et composants
● Création de composants dynamiques avec defineAsyncComponent
Travaux pratiques
● Implémentation de composants asynchrones et réutilisables avec transitions complexes
Module3
Gestion d’État avec Pinia et TanStack Query
● Pinia :
○ Configuration avancée des stores
○ Modularisation et optimisation des performances
○ Utilisation des plugins pour enrichir les fonctionnalités
● TanStack Query :
○ Mise en cache intelligente et réhydratation des données
○ Pagination, polling, et chargement infini
○ Gestion fine des états de requêtes (loading, error, success)
Travaux pratiques
● Gestion de données asynchrones et état global avec Pinia et TanStack Query
Module4
Routage avancé avec Vue Router
● Gestion des transitions entre les routes
● Guards avancés :
○ Guards globaux, spécifiques aux composants, ou par route
○ Mise en place de routes protégées pour l’authentification
● Navigation programmatique et gestion de l’historique du navigateur
● Lazy loading des routes et optimisation des performances
Travaux pratiques
● Implémentation d’un routage sécurisé et dynamique dans une application Vue
Module5
Création de composables et directives personnalisées
● Création de composables réutilisables :
○ Partager la logique entre plusieurs composants
○ Gestion avancée des effets avec watchEffect et onUnmounted
● Directives personnalisées :
○ Étendre les fonctionnalités de Vue.js
○ Exemple : lazy loading d’images ou gestion d’autorisations
● Structuration avancée pour une réutilisabilité optimale
Travaux pratiques
● Développement d’un set de composables et directives personnalisées
Module6
Validation et composants de formulaire réutilisables
● Création de composants de formulaire réutilisables :
○ Utilisation de slots et de props dynamiques
○ Extension des composants de base
● Validation avancée avec Vuelidate :
○ Gestion des erreurs de formulaire et retour utilisateur
○ Validation conditionnelle et asynchrone
Travaux pratiques
● Développement d’un système de formulaire complet avec validation et réutilisabilité
Module7
Tests avancés avec Vitest et Cypress
● Tests unitaires et intégration avec Vitest :
○ Mocking et stubbing avec Vue Test Utils et MSW
○ Tester les événements, les appels API, et les dépendances externes
● Tests end-to-end avec Cypress :
○ Scénarios avancés pour valider les interactions utilisateur
○ Automatisation des tests pour le flux complet de l’application
● Stratégie de tests complète et couverture de code avec Stryker
Travaux pratiques
● Mise en place d’un pipeline de tests automatisés avec Vitest et Cypress
Module8
Mise en production et déploiement avancé
● Optimisation des bundles pour la production :
○ Code splitting, tree-shaking, minification
● Configuration du serveur et gestion des environnements
● Déploiement avec CI/CD :
○ Automatisation des builds et déploiements avec GitHub Actions
○ Hébergement sur Netlify, Vercel, ou AWS
● Monitoring des performances en production avec Sentry
Travaux pratiques
● Déploiement d’une application Vue complète avec CI/CD et monitoring
Module9
Internationalisation avec i18n
● Bases de l’internationalisation avec Vue i18n :
○ Utilisation de fichiers statiques pour les traductions
● Gestion des langues dynamiques :
○ Chargement à la demande des fichiers de traduction
● Intégration des ressources dans les composants et l’interface
Travaux pratiques
● Ajout d’un système d’internationalisation dans une application Vue
Module10
Architectures complexes et applications évolutives
● Présentation d’architectures avancées :
○ Applications modulaires et extensibles
○ Gestion des micro-frontends avec Vue
● Interface de création de pages :
○ Système de drag-and-drop de composants
○ Génération dynamique d’interfaces utilisateur
● Implémentation de DDD (Domain-Driven Design) dans une application Vue
Travaux pratiques
● Développement d’une application Vue évolutive avec une architecture modulaire
Module11
Rendu Côté Serveur (SSR) avec Nuxt.js
● Introduction au Server-Side Rendering et ses avantages (SEO, performances)
● Structure de projet et rendu universel avec Nuxt.js
● Préchargement des données côté serveur avec asyncData et fetch
● Hydratation côté client et gestion des erreurs
Travaux pratiques
● Développement d’une application SSR avec Nuxt.js
Module12
TypeScript Avancé avec Vue.js
● Typage des composants : props, emits, slots fortement typés
● Utilisation de la Composition API avec des types avancés
● Gestion des erreurs et des types pour les appels API
● Création de composants réutilisables avec TypeScript
Travaux pratiques
● Intégration de TypeScript avancé dans une application Vue.js

Les prochaines
sessions de formation

Sur demande
Vous souhaitez organiser cette formation à une date spécifique ?Contactez-nous en remplissant le formulaire ci-dessous
25 novembre 2024
27 janvier 2025
24 mars 2025
12 mai 2025

Cette formation vous intéresse ? Contactez-nous !

    Les données personnelles collectées sont destinées à Access IT Company et utilisées pour traiter votre demande et, lorsque vous ne vous y êtes pas opposé, vous communiquer nos offres commerciales. Les données obligatoires vous sont signalées sur le formulaire par un astérisque. L’accès aux données est strictement limité par Access IT Company aux collaborateurs en charge du traitement de votre demande. Conformément au Règlement européen n°2016/679/UE du 27 avril 2016 sur la protection des données personnelles et à la loi « informatique et libertés » du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès, de rectification, d’effacement, de portabilité et de limitation du traitement des donnés vous concernant ainsi que du droit de communiquer des directives sur le sort de vos données après votre mort. Vous avez également la possibilité de vous opposer au traitement des données vous concernant. Vous pouvez exercer vos droits en contactant le DPO à l’adresse suivante : [email protected] ou à l’adresse postale suivante 2, Allée Lavoisier, 59650 Villeneuve d’Ascq. Pour plus d’informations sur le traitement de vos données personnelles par Access IT Company, veuillez consulter notre politique de confidentialité disponible sur notre site internet à l’adresse suivante : https://formation.access-it.fr/politique-de-confidentialite/