Vue.Js | Développer des applications web Mixte : présentiel / à distance

Cette formation de trois jours donne aux développeurs les clés pour construire une application web moderne et dynamique : création de composants réactifs, navigation fluide, état centralisé sécurisé et communication avec une API.

Au fil d’ateliers courts et adaptables, chaque participant applique immédiatement les notions abordées, du premier écran interactif jusqu’au déploiement en ligne. Le programme insiste sur la performance, l’accessibilité et la fiabilité grâce aux tests automatisés, tout en restant accessible aux équipes issues de JavaScript “classique”.

A l'issue de la formation, le stagiaire sera capable de développer une application Single Page App (SPA) complète avec Vue.js

• Maîtriser l'environnement du développeur JS
• Comprendre les principes clés et bonnes pratiques de Vue.js
• Connaître les outils indispensables au développement d'applications web dynamiques avec Vue.js
• Savoir développer une SPA avec Vue.js
• Réaliser des tests

Jour 1 – Découvrir Vue.js

• Structurer un projet avec modules, classes et design patterns récurrents

Vue.js – Introduction et philosophie

• Comprendre la philosophie, l'écosystème et les cas d'usage
• Démarrage et lancement d'un projet : récupération de Node, démarrage du gabarit avec un assistant graphique, test du rechargement instantané
• La logique réactive : ref, reactive, watch, computed
• Les composants : création de petits blocs réutilisables, alimentation en données, écoute des clics, placement dans la page
• Le rendu : afficher/masquer un bloc, répéter une carte dans une liste, isoler la feuille de style pour éviter les conflits

Atelier pratique Jour 1

• Construire un écran type “fiche” (profil, carte produit, etc.) pour s'exercer aux composants, à la réactivité et aux styles

Jour 2 – Routage, état global & appels API

• Structurer une SPA (Single Page Application) avec navigation dynamique, état partagé et récupération des données via API

Routage et gestion d'état

• Vue Router : configuration, navigation et routes dynamiques
• Gestion des vues et layout : partage des informations communes (ex. panier, session) entre tous les écrans sans duplication
• Connexion à un service Web : récupération des données, affichage d'indicateurs de chargement et messages d'erreurs
• Première couche de sécurité : blocage des scripts malveillants, protection des pages réservées

Atelier pratique Jour 2

• Réaliser une liste puis une page détail avec ajout d'un élément favori
• Mettre en œuvre le routage, le magasin d'état et les appels API

Jour 3 – Tests automatisés, optimisation & déploiement continu

• Garantir la stabilité : écrire et exécuter des tests unitaires / end-to-end
• Améliorer le temps de chargement et l'accessibilité
• Publier sans friction

Tests et performance

• Tests unitaires : vérification des composants et fonctions avec Jest
• Tests end-to-end : vérification automatique du bon fonctionnement avec Cypress
• Performance et accessibilité : allègement de l'application, découpage des fichiers, images adaptées, audit automatique avec axe-core et Lighthouse
• Déploiement sans douleur : construction de la version finale, envoi sur un hébergement gratuit, introduction aux scripts et à l'assistance IA pour proposer ou relire les scripts

Atelier pratique Jour 3

• Préparer la version de production, mesurer les performances principales, corriger les problèmes détectés puis publier sur un hébergement gratuit

Docaposte Institute propose plusieurs dispositifs pédagogiques adaptés aux apprenants :

• Formation en présentiel
  • En groupe (inter-entreprises ou intra-entreprise)
  • En individuel (monitorat)
  • En journée ou en cours du soir (sur demande spécifique)
• Formation en distanciel
  • Distanciel synchrone
  • Distanciel asynchrone

• Apports des connaissances communes.
• Mises en situation sur le thème de la formation et des cas concrets.
• Méthodologie d'apprentissage attractive, interactive et participative.
• Équilibre théorie / pratique : 60 % / 40 %.
• Supports de cours fournis au format papier et/ou numérique.
• Ressources documentaires en ligne et références mises à disposition par le formateur.
• Pour les formations en présentiel dans les locaux mis à disposition, les apprenants sont accueillis dans une salle de cours équipée d'un réseau Wi-Fi, d'un tableau blanc ou paperboard. Un ordinateur avec les logiciels appropriés est mis à disposition (le cas échéant).

En amont de la formation :

• Recueil des besoins des apprenants afin de disposer des informations essentielles au bon déroulé de la formation (profil, niveau, attentes particulières...).
• Auto-positionnement des apprenants afin de mesurer le niveau de départ.

Tout au long de la formation :

• Évaluation continue des acquis avec des questions orales, des exercices, des QCM, des cas pratiques ou mises en situation...

A la fin de la formation :

• Auto-positionnement des apprenants afin de mesurer l'acquisition des compétences.
• Evaluation par le formateur des compétences acquises par les apprenants.
• Questionnaire de satisfaction à chaud afin de recueillir la satisfaction des apprenants à l'issue de la formation.
• Questionnaire de satisfaction à froid afin d'évaluer les apports ancrés de la formation et leurs mises en application au quotidien.

• Admission sans disposition particulière