- ACN_ATLAS
- Certifiant
- Cours pratique
- Informatique
Formation Vue.JS - Développement d'applications web
- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
- Certification
- Certified Vue.JS Developer
Description de la formation Vue js
Vue.js est un framework Javascript basé sur le principe d’une application à page unique (SPA) qui consiste à réécrire une page Web existante avec de nouvelles données provenant du serveur sans recharger entièrement la page. L’interaction avec les utilisateurs permet donc d’atteindre d’excellentes performances et les applications SPA sont connues pour offrir également une bonne expérience utilisateur (UX). La simplicité de prise en main de Vue.js et sa facilité d’intégration avec d’autres bibliothèques ou projets existants font également partie de ses atouts pour une adoption par les équipes de développement Front.
Objectifs pédagogiques
À l'issue de cette formation Vue.js, vous aurez acquis les connaissances et compétences nécessaires pour :
- Maîtriser l’environnement du développeur JS
- Comprendre les principes clés et bonnes pratiques de Vue.js par rapport à d’autres frameworks ou bibliothèques (jQuery, Angular, React)
- Connaître les outils indispensables au développement d'applications web dynamiques avec Vue.js
- Savoir développer une SPA avec Vue.js dans un environnement de développement JavaScript cohérent
- Réaliser des tests
Objectifs opérationnels
Savoir développer une application Single Page App (SPA) complète avec Vue.js.
Cette formation n'a pas pour vocation de préparer à l'examen de certification Certified Vue.JS Developer, mais couvre néanmoins l'intégralité des sujets attendus.
L'examen n'est pas compris dans le prix de la formation.
Il se passe en ligne en deux parties (QCM + Pratique dans un environnement spécifique).
Pour les personnes intéressées par le passage de cette certification, nous proposons en option une journée préparatoire dédiée aux révisions propres à l'examen (ateliers pratiques spécifiques et questions type QCM). Contactez notre service commercial pour en savoir davantage.
Programme
Contenu du cours, module par module
9 modules
- Qu’est-ce qu’une application SPA (Single Page Application) ?
- Les origines du framework Vue.js
- Pourquoi choisir Vue.js?
- Comparaison avec les frameworks (jQuery, Angular, ReactJS)
Travaux pratiques
Description : À partir d'un cas concret (par exemple, la nécessité de rendre une page web interactive sans rechargement complet), les participants devront identifier comment Vue.js peut répondre à cette problématique. Ils compareront les solutions offertes par Vue.js avec celles d'autres frameworks ou bibliothèques comme jQuery, Angular ou React.
- Utilisation simple, sans outils de build
- Présentation de "hello world"
- Savoir intégrer Vue.js incrémentalement
Travaux pratiques
Description : Les participants créeront une page HTML intégrant Vue.js via un CDN. Ils développeront une petite application affichant un message dynamique ("Hello World") et expérimenteront les bases de la liaison de données (data binding) et des directives Vue.js.
- Le one-way data binding
- Connaître les méthodes d'utilisation de Vue.js
- Les computed properties
- Directives de contrôle de flux
- Directives de gestion d'évènements
- Présentation des principaux filtres
- Les composants fournis avec Vue.js
- Connaître les pièges les plus courants
Travaux pratiques
Description : Les participants transformeront une page HTML statique en une page dynamique en utilisant les fonctionnalités de templating de Vue.js. Ils implémenteront des directives de contrôle de flux (v-if, v-for) et des propriétés calculées pour gérer l'affichage conditionnel et les rendu de listes dynamiques.
- Découpler les widgets du HTML
- Présentation du cylcle de vie des composants
- Modules complets "stand alone"
- Connaitre la hiérarchie et la composition
- Maîtriser les états et la communication entre composants
- Composant option api
- Les différences avec composition api
Travaux pratiques
Description : Les participants développeront des composants réutilisables (par exemple, une carte d'utilisateur) et les intégreront dans une application principale. Ils apprendront à gérer la communication entre composants via les props et les événements personnalisés.
- La déclaration des vues
- La manipulation de l’historique
- La navigation
- Routes imbriquées / Nested routes
- Redirection
- Gestion d‘erreur
- Les messages flash
Travaux pratiques
Description : Les participants mettront en place Vue Router avec le mode historique activé. Ils configureront le serveur pour rediriger toutes les requêtes vers l'index.html et géreront les routes imbriquées, les redirections et les pages d'erreur.
- Les apports d’un gestionnaire d’état (état, vue, actions)
- Zone de stockage centralisée pour tous les composants
- Règles pour contrôler les mutations de l’état de l’application
- Créer et appeler des actions
- Cache et performance
- La gestion des erreurs
- Définir des accesseurs (getters)
Travaux pratiques
Description : Les participants créeront un store avec Pinia pour gérer une liste d'éléments (par exemple, des tâches). Ils implémenteront des getters pour filtrer les éléments selon certains critères (par exemple, tâches complètes/incomplètes) et compter le nombre d'éléments correspondant.
- Utiliser Axios pour consommer des API
- Consommation d’une API REST avec Vue 3
Travaux pratiques
Description du TP : Les participants utiliseront Axios pour effectuer une requête GET vers une API fournissant une liste de contacts. Ils afficheront les données reçues dans la vue, implémenteront un système de filtrage (par exemple, recherche par nom) et géreront les états de chargement et d'erreur.
- Installation via le package manager
- La construction via webpack
- Projet avec Vite
- Pre-processing avec Rollup
Travaux pratiques
Description : Les participants utiliseront Vite pour construire l'application en mode production. Ils analyseront la taille des bundles générés, mettront en place des techniques d'optimisation (lazy loading, tree shaking) et déploieront l'application sur un serveur statique ou une plateforme d'hébergement
- Emplacements et composants
- Organisation du store Pinia
- Appels d’API et validation des données
- La gestion des variables d’environnements ($config)
- Optimiser l’utilisation des bibliothèques (coût d’importation)
Travaux pratiques
Description : Les participants créeront une application de blog permettant de lister des articles, d'en ajouter, de les modifier et de les supprimer. Ils utiliseront Vue Router pour la navigation entre les pages, Pinia pour la gestion de l'état, Axios pour la communication avec une API fictive ou réelle, et structureront l'application en composants réutilisables.
Programme mis à jour le 10/12/2025
Public concerné
Ce cours s’adresse principalement aux développeurs ou architectes logiciel JavaScript désireux de créer des applications web dynamiques ou des SPA de manière flexible et performante. Les développeurs ainsi concernés possèdent une expérience pratique de développement en JavaScript et idéalement de ses principaux bibliothèques et frameworks : jQuery, Angular, React… Ils disposent tout au moins d’une connaissance théorique des apports de Vue.js par rapport aux technologies citées.
La formation intéressera également les intégrateurs et chefs de projet sensibles à la notion de poids et cherchant à savoir si Vue.js offre un bon compromis performance-rapidité.
Prérequis
Les participants à cette formation possèdent une bonne connaissance pratique de HTML et la maîtrise du langage JavaScript et de son environnement. Au cœur de l’architecture proposée par Vue.js. Vue.js requérant un environnement Node.js pour fonctionner, il est également important de connaître cette plateforme.
Pour prendre la juste mesure des apports de Vue.js dans le cadre d’un développement JavaScript, il est souhaitable (mais pas indispensable) que les participants disposent d’une connaissance préalable de jQuery, Angular et React. La formation propose néanmoins un comparatif entre Vue.js et les technologies nommées, accessible aux non-initiés.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,8/5
34 avis
« Mon avis sur le contenu du stage : "J'aurais bien aimé qu'on puisse montrer nos exercices pour savoir ce qui était correct ou non, plutôt que d'avoir la correction directement par le formateur. Mais sans doute est-ce trop compliqué quand on est beaucoup." Mon avis sur le formateur : "Formateur très sympathique et à l'écoute" »
CJLEHIBOU « Mon avis sur le contenu du stage : "excellent formateur " Mon avis sur la salle de formation : "très bon environnement pour l'apprentisage" Ce que j'ai le plus apprécié : "excellent formateur tres competent " »
MOUAMMINE AbderrahmaneALTRAN TECHNOLOGIES « Mon avis sur la salle de formation : "Merci pour les fruits ! J'ai fait une propostion durant mon ancienne formation ici et j'ai pu en manger aujourd'hui. Chapeau, vous êtes désormais au top du top !!!" »
LUKOWIAK ThibautTUI FRANCE
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- Adonis JS Réf. ADOS3 joursIntermédiaireProchaine session : 25 nov.2 090 €
- Angular : Développer une application webRéf. ANGR3 joursIntermédiaireProchaine session : 21 oct.2 090 €
- Angular AvancéRéf. AGAV3 joursIntermédiaireProchaine session : 12 oct.2 090 €
- AngularJS V1 : maîtriser le framework JavaScript de GoogleRéf. IAJS3 joursIntermédiaire