1. Introduction
Le PDF du document est ICI.
Les codes du document sont ICI.
Ce document est un produit de l'IA Claude d'Anthropic. Il fait suite au cours Introduction étape par étape au framework web NestJS, dont il change le point de vue :
- dans le cours [NestJS], c'est le serveur qui fabrique les pages HTML (moteur de vues [Handlebars]) ; le navigateur se contente de les afficher ;
- dans ce cours, les pages sont fabriquées dans le navigateur, par une application [Vue.js] ; le serveur, devenu un simple serveur JSON, ne fournit plus que des données.
Les pages de l'application, elles, ne changent pas : ce sont celles de l'application [RdvMedecins] déjà présentées avec les autres frameworks (connexion avec captcha, agenda d'un médecin, fenêtre de réservation, espace du patient, gestion des médecins et des clients, création d'un compte, français et anglais).
Le document suit la même progression que ses prédécesseurs : d'abord de nombreux petits exemples, chacun centré sur une notion de [Vue.js], puis une étude de cas complète, le client [Vue.js] de l'application [RdvMedecins], dont tous les fichiers sont commentés.
Deux cours existent déjà sur [Vue.js] : Introduction au framework VUE.JS par l'exemple (2019), écrit pour [Vue.js] 2, et Un exemple de client / serveur Vue.js / NestJS (2026), qui étudie à la fois le serveur et le client. Le présent document s'en distingue par sa démarche : le serveur y est une boîte noire, dont seule l'API JSON nous intéresse, et l'on apprend [Vue.js] pas à pas, avant de s'attaquer au client complet.
1.1. La place de Vue.js dans une application web
L'application a deux parties, qui ne se parlent que par des requêtes HTTP :
- 1 : l'application [Vue.js], exécutée par le navigateur, envoie une requête HTTP au serveur, par exemple [GET /api/agenda?idMedecin=1&jour=2026-10-05] ;
- 2 : le serveur répond par des données JSON : l'agenda de ce médecin, ce jour-là. Il ne fabrique aucune page ;
- 3 : avec ces données, [Vue.js] met à jour la page affichée, dans le navigateur, sans la recharger.
Le schéma suivant compare les deux architectures :
Le navigateur ne charge qu'une seule page HTML, presque vide, au démarrage. Tout le reste est fabriqué par du code [JavaScript] : c'est ce qu'on appelle une application à page unique (SPA, pour [Single Page Application]). Quand l'utilisateur clique sur un lien interne, aucune page n'est demandée au serveur : le routeur de [Vue.js] change l'adresse affichée et remplace le contenu de la page.
[Vue.js] est un framework [JavaScript] créé en 2014 par Evan You. Il repose sur deux idées :
- les composants : l'interface est découpée en morceaux réutilisables (une barre de navigation, un champ de formulaire, une fenêtre de confirmation...), chacun écrit dans un fichier [.vue] qui regroupe son HTML, son code et son style ;
- la réactivité : les données d'un composant sont « observées ». Quand l'une d'elles change, [Vue.js] met à jour, tout seul, les endroits de la page qui l'affichent. On n'écrit jamais de code qui modifie directement la page.
Nous utiliserons [Vue.js] 3, écrit en [TypeScript], avec son écriture la plus récente : l'API Composition et la balise [<script setup>].
1.2. Les outils utilisés
Les exemples ont été écrits et testés avec les outils suivants (leur installation est décrite en annexe) :
- [Node.js] 22 (ou 20.19 au moins) et son gestionnaire de paquets [npm] ;
- l'éditeur [Visual Studio Code], avec l'extension [Vue (Official)] ;
- un navigateur récent ([Chrome], [Firefox], [Edge]), si possible avec l'extension [Vue.js devtools] ;
- l'outil en ligne de commande [curl], qui affiche les réponses HTTP brutes ;
- le SGBD [MySQL] (ou [MariaDB]), par exemple celui de [Laragon] sous [Windows] : il est nécessaire au serveur JSON, à partir du chapitre qui le présente.
Les bibliothèques sont celles des fichiers [package.json] : [Vue.js] 3.5, [Vite] 7 (l'outil de développement et de construction), [vue-router] 4 (le routeur), [Pinia] 3 (l'état partagé), [vue-i18n] 11 (les langues), [TypeScript] 5.9, [Bootstrap] 5.3.
1.3. Les exemples
Les codes du document sont rangés dans trois dossiers :
Le dossier des exemples contient un sous-dossier par exemple :
Tous les exemples partagent les mêmes bibliothèques, déclarées dans [exemples-vuejs/package.json]. On les installe une seule fois, dans une console ouverte sur le dossier [exemples-vuejs] (dans [VS Code] : menu Terminal / Nouveau terminal) :
puis on lance le serveur de développement de [Vite] :
Un seul serveur, sur le port 5173, sert les vingt exemples. L'adresse http://localhost:5173/ affiche leur sommaire :
On passe d'un exemple à l'autre en suivant ses liens (http://localhost:5173/01-premiere-application/, http://localhost:5173/02-reactivite/...). Le serveur de [Vite] n'a pas besoin d'être relancé : chaque fichier modifié et enregistré est aussitôt recompilé, et la page du navigateur se met à jour d'elle-même. On l'arrête par [Ctrl-C] dans la console.
Les exemples 17 à 20 interrogent le serveur JSON [RdvMedecins] : il faudra alors l'avoir installé et lancé, comme expliqué au chapitre qui lui est consacré.
1.4. Contenu du document
Chapitre | Contenu | Exemples |
Premiers pas | un projet Vite, la réactivité, les directives, les événements, les formulaires, la validation | 01 à 06 |
Les composants | props, événements, v-model, slots, cycle de vie, composables, fenêtre de confirmation | 07 à 12 |
Le routage | le routeur, les gardes de navigation | 13 et 14 |
L'état partagé | les stores Pinia | 15 |
Internationalisation | une application en français et en anglais | 16 |
Le serveur, une boîte noire | installation du serveur JSON, son API, exemples curl | - |
Dialoguer avec le serveur | fetch, connexion et cookie, couche d'accès à l'API, erreurs du serveur | 17 à 20 |
Étude de cas | le client Vue.js de l'application RdvMedecins | - |
Déploiement | le client compilé, servi par le serveur JSON | - |
Chaque exemple est présenté avec son code complet, commenté ligne par ligne, et une copie d'écran de son exécution. Les codes sont eux-mêmes abondamment commentés : leurs commentaires font partie du cours.