Dans la fenêtre d’impression, choisissez « Enregistrer en PDF » comme destination.
Réf. VUE-WEB
Vue.js - Développer des applications Web
Langages & Développement Logiciel
Durée
21 à 28 heures (3 à 4 jours) selon le format
Modalités
Présentiel, Classe à distance
Reconnaissance
Formation non certifiante (attestation de fin de formation)
Format de vente
Inter-entreprise ou Intra-entreprise
Délai d’accès
Inter : jusqu’à 5 jours ouvrés avant la session ; intra : en moyenne 15 jours ouvrés après l’acceptation du devis
Tarif intra
Sur devis
Pourquoi suivre cette formation
Les applications web modernes demandent une architecture front-end dynamique et réactive. Cette formation vous apprend à maîtriser Vue.js, à concevoir des composants réutilisables, à gérer l'état de l'application et à utiliser des API REST.
À l’issue de cette formation, les participants seront capables de
Organiser une application monopage (SPA) avec l'architecture par composants de Vue
Maîtriser la logique réactive et la syntaxe moderne de la Composition API (setup, ref, computed)
Gérer la communication entre composants et synchroniser les données
Sécuriser et configurer la navigation grâce à un routage avancé
Relier l'interface à des API REST de façon asynchrone et fiable
IMPACTTerrain28 heures (4 jours) · dont une journée en décalé2 605 € HTpar participant (inter-entreprises)
Chaque format reprend le précédent et y ajoute des journées.
Public visé
Développeurs Web, ingénieurs logiciels, concepteurs d'applications front-end désireux de s'approprier le framework Vue.js.
Prérequis
Maîtrise des concepts de base de JavaScript (ES6). Connaissances basiques sur l'usage de Node.js/NPM et de Git sont recommandées.
Prérequis techniques à distance
La classe virtuelle se tient sur Microsoft Teams : AMBIA fournit à chaque participant un compte pour la durée de la formation. En intra-entreprise, elle peut aussi se tenir sur l’outil que l’entreprise utilise déjà, par exemple Zoom ou Google Meet.
Le participant se connecte depuis un ordinateur équipé d’une caméra, d’un micro, d’un accès à internet et d’un navigateur à jour, dans un lieu calme. Si la formation le demande, le formateur donne accès à un poste de travail à distance, depuis le navigateur.
Pendant la formation, l’assistance technique répond à support@ambia-skills.fr.
Objectifs pédagogiques
Identifier le principe de réactivité de Vue et le cycle de vie d'un composant.
Différencier l'approche de la Composition API par rapport à l'Options API.
Concevoir des composants SFC (Single File Components) réutilisables à l'aide de JSX/HTML et CSS.
Structurer la hiérarchie de l'état (local, partagé ou global) selon les cas métiers.
Analyser et optimiser les performances de rendu d'une application Vue.
Générer, tester localement et compiler un livrable de production optimisé et sécurisé.
Programme détaillé
Jour 1ACTION
Matin
Démarrage rapide avec Vite, structure et Composition API
Comprendre le fonctionnement de Vue, configurer son environnement de développement et initialiser un premier composant avec la Composition API.
Concepts fondamentaux et avantages du framework réactif Vue.js.
Création d'un projet performant avec Vite et exploration de l'arborescence.
Conception de listes dynamiques filtrables et associées à des champs d'interactions.
Cas métier
Développement de la console d'alertes de maintenance du bâtiment : listage des pannes matérielles, filtres par sévérité et boutons d'acquittement rapide.
Compétence acquise
Savoir manipuler dynamiquement le rendu graphique de l'application en réponse aux actions des utilisateurs.
Livrable
Module d'alerte métier réactif, dynamique et interactif.
Jour 2ACTION
Matin
Communication inter-composants et cycle de vie
Faire communiquer de manière fluide et sécurisée des composants d'une même page en exploitant les flux d'informations descendants et ascendants.
La transmission de propriétés descendantes à l'aide des props (defineProps).
L'émission d'événements personnalisés ascendants à l'aide des emits (defineEmits).
Compréhension fine des étapes du cycle de vie d'un composant (onMounted, onUnmounted, onUpdated) pour y lier des scripts.
Atelier pratique
Établissement d'une structure relationnelle parent/enfant complexe avec transfert d'événements et de données typées.
Cas métier
Création du panneau de réglage d'une pièce : le composant parent envoie les consignes de température aux thermostats enfants, qui notifient en retour le parent des changements de statut.
Compétence acquise
Structurer un arbre de composants communicant de manière saine et maintenable.
Livrable
Composants interconnectés gérant de manière récursive la remontée et la redescente d'informations.
Après-midi
Intégration d'API et programmation asynchrone
Connecter l'application Vue à un serveur de base de données distant pour charger et manipuler des données d'entreprise.
Utilisation du client HTTP fetch ou d'outils externes comme axios au sein du framework.
Gestion asynchrone des phases de chargement et des scénarios de pannes ou d'erreurs réseau.
Création de fonctions d'effets secondaires réutilisables (Composables) pour isoler la logique métier d'accès aux API.
Atelier pratique
Écriture de services d'appels asynchrones connectés à une API de démonstration avec gestion des statuts de chargement.
Cas métier
Connexion de l'application au service de surveillance générale pour récupérer la liste en temps réel des températures de chaque pièce d'un bâtiment de l'entreprise.
Compétence acquise
Savoir requêter, manipuler et intégrer proprement des flux de données distants asynchrones.
Livrable
Module de traitement asynchrone résistant aux pannes de communication API.
Jour 3ACTION
Matin
Formulaires avancés et validation de données
Concevoir des formulaires de saisie riches, fluides et validés de manière robuste côté client avant soumission.
Mise en œuvre du double-sens de données (v-model) sur tous les types d'éléments d'un formulaire (inputs, select, checkbox, radio).
Gestion d'états de formulaires complexes (objets imbriqués).
Création de règles de validation métier personnalisées et affichage dynamique des erreurs.
Atelier pratique
Établissement d'un formulaire dynamique d'ajout d'équipement intégrant des validations asynchrones et des formats stricts.
Cas métier
Formulaire d'enregistrement d'une nouvelle sonde thermique (contrôle de conformité de l'adresse IP, du type de capteur et du nommage du bâtiment).
Compétence acquise
Savoir collecter, valider et structurer des données complexes saisies par l'utilisateur.
Livrable
Écran d'enregistrement métier hautement sécurisé sur le plan des données d'entrée.
Après-midi
Navigation avancée (Vue Router) et compilation
Implémenter un système de navigation multi-pages et compiler l'application finale pour son hébergement de production.
Introduction et configuration du routeur officiel : Vue Router.
Paramétrage des routes, sous-routes et gestion des paramètres dynamiques d'URL.
Mise en place de barrières de sécurité de navigation (Navigation Guards) pour sécuriser l'accès aux pages.
Processus de build final optimisé à l'aide de Vite pour générer les fichiers de production.
Atelier pratique
Déploiement d'un routeur complet avec authentification d'accès fictive et exécution du build de production.
Cas métier
Finalisation du portail d'énergie avec sécurisation de la page d'administration générale, uniquement accessible après validation des droits du technicien.
Compétence acquise
Savoir structurer une architecture complète de site de type Single Page Application et exporter ses livrables pour un hébergement web professionnel.
Livrable
Application Web de supervision entièrement finie, sécurisée au niveau de sa navigation, optimisée et compilée pour la production.
Jour 4 · en décaléIMPACT
Matin
Diagnostic de l'architecture des composants, des composables et du store Pinia
Analyser l'organisation des composants, l'usage de la Composition API et le store Pinia de l'application réelle.
Analyse du code Vue de l'entreprise : découpage en composants réutilisables, extraction de composables, réorganisation du store Pinia et optimisation de la réactivité (computed, watch ciblés, v-memo).
Après-midi
Chargement différé des routes, Navigation Guards et appels API
Mettre en œuvre le chargement différé des routes de Vue Router et sécuriser les accès par Navigation Guards et jeton JWT.
Réduction du temps de chargement initial : imports dynamiques des routes, Navigation Guards (beforeEach, méta de route), appels API centralisés avec le jeton JWT (intercepteur axios) et analyse de la taille du build de production (Vite).
Les ateliers et cas métier de ce programme pourront être adaptés par le consultant-formateur selon les besoins, le niveau et les prérequis des participants, pour favoriser l’atteinte des objectifs pédagogiques.
Méthodes et moyens pédagogiques
Méthodes mobilisées
Apprentissage actif s'appuyant sur la résolution de cas concrets. Démo de l'expert, phases de co-développement guidées, pair-programming et sessions collectives de revues de code pour valider l'élégance et la robustesse de l'implémentation.
Moyens techniques
Un poste informatique configuré par apprenant (VS Code avec l'extension officielle Volar/Vue Official, Node.js, Git, Vite). Accès au serveur d'exercices d'AMBIA et mise à disposition de mocks d'API REST.
Moyens humains
Formation animée par un consultant-formateur expert senior, spécialiste des architectures JavaScript/TypeScript modernes et de l'intégration de Vue.js en production.
Modalités d’évaluation
Évaluation diagnostique
Questionnaire d'évaluation des prérequis techniques (JavaScript moderne) envoyé 15 jours avant la session.
Évaluation formative
Évaluation continue durant la formation à travers le contrôle régulier par le formateur de l'avancement des étapes de codage du projet applicatif.
Évaluation sommative
Projet de fin de parcours basé sur l'ajout autonome d'une fonctionnalité métier complexe, complété par un Questionnaire de validation des acquis sous forme de QCM en fin de formation.
Suivi
Feuilles de présence signées par demi-journée, en présentiel comme à distance.
Attestation de fin de formation remise à chaque stagiaire, mentionnant les objectifs, la nature, la durée et les résultats de l’évaluation.
Certificat de réalisation adressé au client ou au financeur.
Questionnaire de satisfaction remis à l’issue de la formation.
Délai d’accès
Inter-entreprises : L’inscription est possible jusqu’à 5 jours ouvrés avant le début de la session, sous réserve des places disponibles.
Intra-entreprise : La formation débute en moyenne 15 jours ouvrés après l’acceptation du devis.
Ce délai peut être adapté selon la disponibilité des sessions, le positionnement du stagiaire et, le cas échéant, l’instruction du dossier de prise en charge par le financeur.
Accessibilité handicap
Nos parcours sont adaptables aux personnes en situation de handicap. Merci de vous rapprocher de notre référent pour l'analyse des aménagements.
Référent handicap : accessibilite@ambia-skills.fr. Aucune reconnaissance de la qualité de travailleur handicapé ni aucun justificatif médical n’est exigé.
Indicateurs de résultats
Indicateurs publiés à partir de 3 avis.
Mode de calcul : www.ambia-skills.fr/notre-approche#notes
