- Référence : IVJS
- Durée : 3 jours (21h)
- Lieu : Au choix. À distance ou en présentiel, à Paris ou en Régions
1990€ HT
Choisir une date et RéserverFormation Vue.JS - Développement d'applications web
4.8 sur 5 étoiles
5 étoiles
4 étoiles
3 étoiles
2 étoiles
1 étoile
Durée
3 jours
Niveau
Intermédiaire
Classe à distance
Possible
Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...
Référence
IVJS
Éligible CPF
Non
Certification
Certified Vue.JS Developer
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.
Objectif opérationnel :
Savoir développer une application Single Page App (SPA) complète avec Vue.js.
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
Public :
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 ce test.
J1
Les origines du framework Vue.js
Pourquoi choisir Vue.js?
Comparaison avec les frameworks (jQuery, Angular, ReactJS)Travaux pratiquesObjectif : Comprendre les avantages de Vue.js en analysant une problématique spécifique du développement web.
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.
Présentation de "hello world"
Savoir intégrer Vue.js incrémentalementTravaux pratiquesObjectif : Mettre en place une application Vue.js simple sans outils de build.
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.J2
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 courantsTravaux pratiquesObjectif : Utiliser Vue.js pour gérer des templates dynamiques dans une application web.
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.
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 apiTravaux pratiquesObjectif : Créer et utiliser des composants Vue.js pour structurer une application.
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.J3
La manipulation de l’historique
La navigation
Routes imbriquées / Nested routes
Redirection
Gestion d‘erreur
Les messages flashTravaux pratiquesObjectif : Configurer le mode historique de Vue Router pour une navigation sans hash dans l'URL.
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.
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 pratiquesObjectif : Utiliser Pinia pour gérer l'état global d'une application et effectuer des calculs dérivés.
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.
Consommation d’une API REST avec Vue 3Travaux pratiquesObjectif : Consommer une API REST avec Axios et afficher les données dans une application Vue.js.
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.
La construction via webpack
Projet avec Vite
Pre-processing avec RollupTravaux pratiquesObjectif : Préparer et déployer une application Vue.js optimisée pour la production.
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
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 pratiquesObjectif : Développer une application complète de type blog en utilisant Vue.js et les concepts abordés durant la formation.
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.
Avantages et inconvénients de Vue.js
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 pratiquesObjectif : Comprendre les avantages de Vue.js en analysant une problématique spécifique du développement web.
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 de Vue
Utilisation simple, sans outils de buildPrésentation de "hello world"
Savoir intégrer Vue.js incrémentalementTravaux pratiquesObjectif : Mettre en place une application Vue.js simple sans outils de build.
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.J2
Utilisation sous forme de templates
Le one-way data bindingConnaî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 courantsTravaux pratiquesObjectif : Utiliser Vue.js pour gérer des templates dynamiques dans une application web.
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.
Utilisation sous forme de composant
Découpler les widgets du HTMLPré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 apiTravaux pratiquesObjectif : Créer et utiliser des composants Vue.js pour structurer une application.
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.J3
Routing avec Vue-router
La déclaration des vuesLa manipulation de l’historique
La navigation
Routes imbriquées / Nested routes
Redirection
Gestion d‘erreur
Les messages flashTravaux pratiquesObjectif : Configurer le mode historique de Vue Router pour une navigation sans hash dans l'URL.
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.
Data store avec Pinia (introduction)
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 pratiquesObjectif : Utiliser Pinia pour gérer l'état global d'une application et effectuer des calculs dérivés.
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.
Vue.js et les données extérieures (Call API)
Utiliser Axios pour consommer des APIConsommation d’une API REST avec Vue 3Travaux pratiquesObjectif : Consommer une API REST avec Axios et afficher les données dans une application Vue.js.
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.
Vue.js dans une stack JS moderne : npm, webpack, Babel et Vite
Installation via le package managerLa construction via webpack
Projet avec Vite
Pre-processing avec RollupTravaux pratiquesObjectif : Préparer et déployer une application Vue.js optimisée pour la production.
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
Bonnes pratiques avec Vue.js
Emplacements et composantsOrganisation 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 pratiquesObjectif : Développer une application complète de type blog en utilisant Vue.js et les concepts abordés durant la formation.
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.
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.
Dates et lieux
1
2
3
4
5
6
7
1
2
3
4
5
6
7
Votre formation Vue.js prise en charge jusqu'à 100% des coûts pédagogiques ! *
Depuis 2018, Atlas (ex-Fafiec) a sélectionné PLB Consultant pour vous proposer les meilleures formations autour de l'Open Source.
- Sessions inter-entreprise sur Paris, Lyon et Lille.
- Sessions intra-entreprise sur toute la France.
* jusqu'à 100% des coûts pédagogiques selon votre branche d'activité dans la limite des fonds mutualisés dédiés aux actions collectives et en application des critères de prise en charge en vigueur (cf conditions détaillées sur le site d'Atlas)
Vous pouvez retrouver le lien direct vers cette formation sur le site d'Atlas, à l'adresse suivante :
Avis des participants à la formation Vue.JS - Développement d'applications web
Les avis figurant ci-dessous 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.
CJ
5/5
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"
MOUAMMINE Abderrahmane
5/5
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 "
GC
5/5
Mon avis sur le contenu du stage :
"Bonne répartition théorie/pratique."
Mon avis sur le formateur :
"Pédagogue, à l'écoute des besoins de chacun et capacité à adapter le rythme en fonction du groupe."
LOUBET Xavier
5/5
Mon avis sur le contenu du stage :
"Bonne répartition théorique/pratique. "
Mon avis sur le formateur :
"Excellence maitrise du sujet. Très bonne pédagogie."
LUKOWIAK Thibaut
5/5
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 !!!"
AT
5/5
Ce que j'ai le plus apprécié :
"les travaux pratiques"
Ce que j'ai le moins apprécié :
"aucun"
SM
5/5
Mon avis sur le contenu du stage :
"Matthieu est très pédagogue, disponible et a adapté sa formation par rapport au niveau du groupe."
BJ
5/5
Mon avis sur le contenu du stage :
"Complet"
Mon avis sur le formateur :
"Très bon formateur"
DAJ
5/5
Mon avis sur le contenu du stage :
"Le support de cours était très détaillé et n'était pas surchargé."
GC
5/5
Mon avis sur le contenu du stage :
"toutes les bases de vuejs ont été balayés"
MCA
5/5
Ce que j'ai le plus apprécié :
"La clarté du support, TP guidé"
BC
5/5
Mon avis sur le formateur :
"Maîtrise son sujet et très disponible."
HK
4/5
Ce que j'ai le plus apprécié :
"Travaux pratiques"
YA
5/5
Ce que j'ai le plus apprécié :
"Les croissants"
DUSSURGET Arnaud
5/5
BOURDA Matthieu
4/5
NE
5/5
DM
4/5
JAQUINOD Eddy
5/5
TAIEB Ines
5/5
JG
5/5
MATON Bruno
5/5
DE
5/5
LT
5/5
AS
5/5
KY
5/5
SM
5/5
TY
5/5
SIDER Boudjamaa
4/5
BJ
4/5
DL
5/5
PL
4/5
PJ
5/5
NF
4/5
MN
4/5
MP
5/5
BMV
5/5
CR
5/5
SH
5/5
OA
5/5
Ces formations peuvent aussi vous intéresser :
Maîtrisez Express, l’API REST, l’asynchrone et l’accès aux données (MongoDB, Redis)
- Niveau : Fondamental
- Référence : INOJ
Node.js avancé
- 3 jrsOptimisez la performance et la qualité de vos applications Node.js
- Niveau : Avancé
- Référence : NJSA
Adonis JS
- 3 jrsCréez des applications web et API robustes avec AdonisJS (TypeScript-first)
- Niveau : Intermédiaire
- Référence : ADOS
L'architecture Angular au service de vos applications NodeJS
- Niveau : Fondamental
- Référence : NEST
Formations Informatique
et Management
en ligne à ce jour
+
Stagiaires dans nos salles
de cours sur
l'année
4,7/5
94% de nos participants
sont satisfaits ou
très satisfaits
Formateurs experts
validés par
PLB
%
Des participants
recommandent
nos formations
