Formation Formation Vue.js : Maîtriser le framework JavaScript pour applications web

Introduction à Vue.js et l'écosystème Front-End

• —Présentation de Vue.js, ses avantages et sa place dans l'écosystème FE
• —Comparaison rapide avec React et Angular
• —Installation des outils : Node.js, npm/yarn, Vue CLI
• —Structure de base d'un projet Vue (CLI)
• —Création de votre première application Vue

Les fondamentaux de l'instance Vue et du templating

• —L'instance Vue : `new Vue({})`
• —Liaisons de données : `v-bind` (one-way binding)
• —Écouteurs d'événements : `v-on`
• —Directives structurelles : `v-if`, `v-else`, `v-show`
• —Directives de rendu de liste : `v-for`

Composants Vue : Modularité et Réutilisabilité

• —Principes des composants : Single File Components (.vue)
• —Passage de données parent-enfant : `props`
• —Émission d'événements enfant-parent : `emit`
• —Slots : distribution de contenu
• —Communication plus avancée (références, etc.)

Gestion des formulaires et liaisons bidirectionnelles

• —Liaison bidirectionnelle : `v-model`
• —Types d'inputs : texte, checkbox, radio, select
• —Modificateurs de `v-model` : `.lazy`, `.number`, `.trim`
• —Validation de formulaires simple
• —Gestion des états de formulaire

Le cycle de vie des composants Vue

• —Hooks du cycle de vie : `beforeCreate`, `created`, `beforeMount`, `mounted`
• —Hooks de mise à jour : `beforeUpdate`, `updated`
• —Hooks de destruction : `beforeDestroy`, `destroyed`
• —Utilisation pratique des hooks pour la logique d'application
• —Bonnes pratiques et erreurs courantes

Propriétés calculées et watchers

• —`computed` properties : optimisation et réactivité
• —Différences entre `computed` et méthodes
• —`watchers` : réaction aux changements de données spécifiques
• —Quand utiliser `computed` vs `watch`
• —Cas d'usage avancés pour `watch`

Routage avec Vue Router

• —Configurer Vue Router pour gérer les routes de l'application
• —Créer des routes dynamiques et des paramètres de route
• —Implémenter la navigation entre les composants avec des liens
• —Gérer la redirection et l'authentification des utilisateurs
• —Utiliser des gardiens de navigation pour protéger les routes sensibles

Gestion d'état avancée avec Vuex (partie 1)

• —Pourquoi Vuex ? Problématiques de gestion d'état
• —Principes de base de Vuex : State, Mutations
• —Mise en place d'un store Vuex
• —Accès aux données de l'état : `mapState`
• —Modification de l'état : `commit`

Gestion d'état avancée avec Vuex (partie 2)

• —Actions : gestion des opérations asynchrones (`dispatch`)
• —Getters : dérivation d'état calculé
• —Modules Vuex : structuration d'applications complexes
• —Helpers Vuex : `mapGetters`, `mapActions`
• —Bonnes pratiques Vuex et design pattern

Requêtes HTTP et interaction avec les API

• —Introduction aux requêtes HTTP en JavaScript
• —Utilisation de `fetch` ou Axios
• —Intégration des requêtes dans les composants Vue/Vuex
• —Gestion des erreurs et des états de chargement
• —Interactions CRUD avec une API REST

Optimisation et déploiement d'applications Vue

• —Optimisation des performances : lazy loading, tree-shaking
• —Build et déploiement d'une application Vue
• —Configuration des variables d'environnement
• —Introduction aux PWA (Progressive Web Apps) avec Vue
• —Bonnes pratiques pour un code propre et maintenable

Sujets avancés et écosystème Vue.js

• —Introduction aux animations et transitions Vue
• —Utilisation de plugins et de directives personnalisées
• —Principes des tests unitaires et d'intégration avec Vue (Vue Test Utils)
• —Vue 3 (Composition API) : Aperçu rapide
• —Ressources et communauté Vue : où aller après la formation

OPCO

Formations financées via votre opérateur de compétences

FAF

Aide à la formation pour les indépendants

France Travail

Des aides pour les demandeurs d'emploi

Employeur

Votre entreprise peut financer votre formation

FNE-Formation

Un soutien pour les entreprises en transformation

Bonnes connaissances en HTML 5Bonnes connaissances en CSS 3Bonnes connaissances en JavaScript (ES6+)Connaissance des concepts de base du développement web

Un ordinateur portable avec un système d'exploitation récent (Windows, macOS, Linux)Un éditeur de code (VS Code recommandé)Un navigateur web moderne (Chrome, Firefox)Une connexion internet stableNode.js et npm/yarn installés

5 tests d'évaluation sont proposés à l'apprenant en fin de formation pour connaître son niveau sur chaque compétences visées.

Plateforme et contenus e-learning à disposition. Test de positionnement Quizz & Evaluations

Nous vous recevons lors d’un rendez-vous d’information préalable gratuit et confidentiel en visioconférence pour analyser vos besoins et co-construire votre parcours personnalisé. Chaque demande s’accompagne de la remise d’une convention ou d’un contrat précisant l’ensemble des informations relatives à la formation (Tarifs, calendrier, durée, lieu…). Ce contrat/convention sera transmis électroniquement par email.

A partir de l’accord de prise en charge par le financeur sollicité, le bénéficiaire peut démarrer sous un délai de 11 jours ouvrés. Si vous financez votre parcours de formation par vos propres moyens, alors le délai d'accès est immédiat. Vous pouvez entrer en formation tout au long de l’année.

♿️ Nous accueillons les personnes en situation de handicap. Les conditions d’accessibilité aux personnes handicapées sont inscrites sur le site imi-education.fr, rubrique Accessibilité.

Saskia Cazettes Pour tout renseignement : 07 80 91 06 14 / saskia.c@imi-executive-solutions.com

23 mars 2026

La formation alterne apports théoriques, mises en situation pratiques et échanges entre participants. Chaque concept est directement appliqué via des exercices concrets et des cas réels.

Oui, chaque participant reçoit un support de cours complet (format numérique et/ou papier) qu'il peut conserver à l'issue de la formation.

Certaines de nos formations sont éligibles au Compte Personnel de Formation (CPF). Consultez la fiche formation ou contactez-nous pour vérifier l'éligibilité.

Plusieurs dispositifs de financement existent : CPF, OPCO, plan de développement des compétences, financement individuel. Notre équipe peut vous accompagner dans vos démarches.

Oui, notre équipe reste disponible pour toute question post-formation. Vous bénéficiez également d'un accès à nos ressources en ligne pendant 6 mois après votre parcours.

Vue.js est un framework JavaScript Open Source permettant de développer des interfaces utilisateur interactives et performantes. Il est choisi pour sa flexibilité, sa facilité d'utilisation et sa grande communauté de développeurs.

Vous apprendrez les fondamentaux de Vue.js, la gestion d'état avec Vuex, l'intégration d'API et le routage client-side, ainsi que comment optimiser et déployer des applications Vue.js.

Bien que les compétences en JavaScript soient un atout, elles ne sont pas nécessaires. Cette formation est conçue pour les développeurs front-end souhaitant se lancer avec Vue.js, quel que soit leur niveau en JavaScript.

Notre organisme de formation s'engage à accueillir et accompagner les personnes en situation de handicap. Notre référente handicap, Mme Lorène Travaux est disponible pour étudier avec vous les adaptations pédagogiques, techniques ou logistiques nécessaires avant toute inscription. Contactez-nous à hello@imi-executive-solutions.com ou au 06 72 09 69 52.