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

Avoir une bonne connaissance pratique de HTML et la maîtrise de JavaScript

Jour 1 – Découvrir Vue.js

Objectifs du jour :

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

Contenu :

• js : 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 durabarit avec un assistant graphique, test du rechargement instantané.
• La logique “réactive” (des variables qui se mettent à jour toutes seules dès qu'on modifie la valeur) : ref, reactive, watch, computed
• Les composants : création de petits blocs réutilisables, alimentation en données, écoute des clics, placez-les où vous voulez 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 (exemple) :
  • 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

Objectifs du jour :

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

Contenu :

• 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'indicateur de chargement, affichage conditionnel et messages d'erreurs
• Première couche de sécurité : blocage des scripts malveillants, protection des pages réservées

• Atelier pratique (exemple) :
  • 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 des appels API

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

Objectifs du jour :

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

Contenu :

• Tests unitaires : vérification des composants, des fonctions avec l'outil Jest par exemple
• Test end-to-end : vérification automatique du bon fonctionnement en conditions réelles avec l'outil Cypress par exemple
• Performance et accessibilité : bonnes pratiques pour alléger l'application, découpage de gros fichiers, chargement d'images adaptées à l'écran, audit automatique avec les outils adaptés (axe-core, Lighthouse...
• Déploiement sans douleur : app Vue, exécution d'une commande qui construit la version finale puis l'envoie sur un hébergement gratuit, introduction aux scripts, usage d'un assistant IA pour proposer le script, la relecture et l'adaptation.

• Atelier pratique (exemple) :
  • Préparer la version de production, mesurer les performances principales et 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.
• Equilibre 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