Vue.js 3 est un framework JavaScript progressif qui permet de construire des interfaces utilisateur reactives, des composants isoles jusqu’aux Single Page Applications completes. Cette formation vous guide de la creation de votre premier composant jusqu’a la gestion d’etat avec Pinia et les tests unitaires avec Vitest. Vous serez operationnel pour developper des applications frontend modernes en equipe.
Public visé
Développeurs de sites Web désirant développer des applications actuelles Front End.
Prérequis
Avoir suivi cette formation, ou en maîtriser les thèmes abordés :
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Mettre en oeuvre le framework Vue.js 3
- Utiliser Vue.js 3 dans le cadre d’une application SPA (Single Page Application) et d’applications clientes plus conventionnelles
Programme
Jour 1 - Matin
Premiers pas avec Vue.js
- Principes clés de Vue.js
- Vue.js vs React vs Angular
- Créer et configurer un projet Vue 3 avec Vite (outil create-vue) - brève ouverture sur Nuxt 3
- La base d’une application : l’instance Vue
- Créer son premier composant Vue.js
- Gérer les évènements du DOM
- Débugger avec Vue Devtools
Travaux pratiques
- Instance d’une première application
Jour 1 - Après-midi
Répartir son code dans des composants
- L’imbrication de composants et les props
- Passer du contenu à un composant : les slots / children
- Déclencher des évènements “custom”
- Le cycle de vie des composants
- “Two-way data binding” vs “One-way data flow”
- Validation de la saisie utilisateur
Jour 2 - Matin
Enrichir ses templates
- Computed properties et méthodes : simplifier l’écriture des templates (utilitaires de formatage global)
- Templates vs méthodes render() et JSX
- Composants fonctionnels
- Animations et transitions : améliorer l’expérience utilisateur
Travaux pratiques
- Réalisation d’une “To Do List”
Jour 2 - Après-midi
Gérer la navigation
- Développer un système de “routing maison”
- Principes de Vue Router
- Configurer des routes
- Sécuriser une application : les “navigation guards”
- Transitions entre écrans
Travaux pratiques
- Réalisation d’un lecteur d’article provenant d’un serveur
Jour 3 - Matin
Gestion des données avec Pinia
- Pinia : concepts de base (store centralisé, state, getters, actions)
- Installation et mise en oeuvre de Pinia
- Pinia et les formulaires
- Etendre Pinia avec les plugins (ex : persistance de données, hydration SSR)
- Composition API :
- Migration d’un composant (de l’API Options vers l’API Composition)
- API Options vs API Composition
Jour 3 - Après-midi
Travaux pratiques
- Création d’un prototype de solution SAS
Premiers pas les tests
- Concepts et familles de tests
- Mise en place de l’environnement de test (Vitest, Vue Test Utils v3) et mocks globaux
- Réalisation d’un premier test unitaire (avec Vitest et Vue test Utils)
- Réaliser un test d’intégration
Modalités 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éthodes démonstrative, interrogative et active via travaux pratiques et mises en situation.
Moyens pédagogiques :
- Ordinateurs Mac ou PC, connexion internet fibre
- Tableau blanc ou paperboard
- Vidéoprojecteur ou écran tactile interactif
- Environnements de formation installés
- Supports de cours et exercices
Modalités d’évaluation des acquis
- En cours de formation : études de cas ou travaux pratiques
- En fin de formation : questionnaire d’auto-évaluation
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
- Angular - Initiation
- Angular - Avancé
- ReactJS - Composants, Hooks et Redux
- ReactJS - Fonctionnalités avancées
- Vue.js 3 - Fonctionnalités avancées
Formation DEV-VUEJS-100 — VueJS - Initiation. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : vuejs, javascript, frontend, spa, pinia, développement, initiation. Cylian Formation, Dijon.