Formation Vue.js
Notre formation Vue.js vous plonge dans l’univers de Vue 3, le framework JavaScript moderne et progressif plébiscité par les développeurs front-end pour sa simplicité, sa performance et sa flexibilité. Que vous soyez développeur ou chef de projet technique, cette formation vuejs vous permettra de maîtriser la création d’interfaces web dynamiques et performantes. Conçu par Evan You et inspiré de React et Angular, Vue.js s’est rapidement imposé comme une référence grâce à son écosystème riche, sa courbe d’apprentissage accessible et son architecture modulaire. Apprenez à développer des applications SPA (Single Page Application) robustes, maintenables et scalables, avec les outils modernes de l’écosystème Vue : Vue CLI, Vue Router, Pinia, Axios, etc.
Objectifs pédagogiques
- Comprendre les fondamentaux du développement moderne en JavaScript (ES6+)
- Maîtriser la structure et les concepts clés de Vue.js (version 3.x)
- Créer une Single Page Application (SPA) avec Vue.js
- Utiliser les outils de l’écosystème Vue : CLI, Devtools, Router, State Management
Pré-requis
- Bonne maîtrise du HTML et CSS
- Solide compréhension de JavaScript
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Rappels sur JavaScript moderne
- Types, variables (`let`, `const`)
- Fonctions fléchées et callbacks
- Programmation asynchrone (Promises, async/await)
- Programmation orientée objet (classes ES6)
- Nouveautés ECMAScript (ES6 à ES2024)
Introduction à Vue.js 3
- Présentation du framework Vue.js et de la Composition API
- Création d’un projet avec Vite et Vue CLI
- Structure d’une application Vue 3
- Mounting dans le DOM et rendu réactif
- Utilisation de Vue Devtools pour déboguer
Syntaxe de template
- Interpolation de données
- Directives de rendu conditionnel (`v-if`, `v-else`, `v-show`)
- Boucles avec `v-for`
- Liaisons avec `v-bind`, `v-on` (modificateurs)
- Propriétés calculées (`computed`)
- Liaison bidirectionnelle avec `v-model`
- Classes et styles conditionnels
Jour 2
Composants Vue.js
- Création et structuration des composants
- Communication parent/enfant avec `props` et `emit`
- Méthodes, données locales (`data`, `setup`)
- Échange de données via les événements personnalisés
- Appels API avec Axios (GET, POST)
- Organisation du code avec fichiers `.vue` (SFC)
Vue Router
- Configuration du routeur (Vue Router 4)
- Définition de routes et navigation (`<router-link>`)
- Paramètres dynamiques dans les routes
- Routes imbriquées et vues enfants
- Garde de navigation (navigation guards)
- Routes génériques et gestion des erreurs 404
Jour 3
Gestion d’état avec Vuex / Pinia
- Introduction à Vuex (ou Pinia selon préférence)
- Définir un store : `state`, `getters`, `mutations`, `actions`
- Accès et mise à jour du store dans les composants
- Debug avec Vue Devtools (onglet Vuex/Pinia)
- Gérer les appels asynchrones dans le store
Vue.js avancé
- Utilisation des **slots** (simples, nommés, scoped)
- Composants dynamiques (`<component :is="">`)
- Composants asynchrones et lazy loading
- Introduction aux **Render Functions** et **JSX**
- Techniques avancées de réutilisation : `provide/inject`, mixins, composables
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation Vue.js accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Dernière modification le 24/06/2025