Vite et composants monofichiers

Le catalogue du chapitre précédent fonctionne, mais sa construction montre ses limites. Les gabarits des composants sont rangés dans des éléments <template> de la page, loin de leur code JavaScript, et soumis aux trois pièges des gabarits que le navigateur lit avant Vue. Tous les composants vivent dans un seul fichier app.js, parce qu'un navigateur ne sait pas charger un composant rangé dans un fichier à part. Et chaque visiteur télécharge, avec Vue, le compilateur de gabarits, qui transforme à chaque chargement le texte des gabarits en code exécutable : un travail qu'on pourrait faire une fois pour toutes.

Les applications professionnelles s'écrivent autrement. Chaque composant occupe un fichier .vue qui réunit son gabarit, son script et son style ; un outil de construction compile ces fichiers, les assemble et produit les quelques fichiers optimisés que le navigateur chargera. Pour Vue, cet outil est Vite. Ce chapitre installe un projet Vite, détaille la structure d'un composant monofichier, puis convertit la Librairie du Campus en projet. C'est sur ce projet que s'appuie la suite du livre.

Les commandes de ce chapitre ont été exécutées avec Node.js 24, npm 11, Vite 8.3.2 et @vitejs/plugin-vue 6.0.9 ; les sorties sont recopiées telles quelles, à l'exception des durées, qui changent d'une exécution à l'autre.

6.1 Node.js, npm et Vite

Le livre JavaScript a utilisé Node.js pour exécuter des programmes hors du navigateur, et son serveur de la Librairie. Node.js sert ici à faire tourner les outils du développeur. Il est livré avec npm, le gestionnaire de paquets de JavaScript : l'équivalent de Maven pour Java, qui télécharge les bibliothèques dont le projet dépend, et lance les commandes du projet.

Vite (« rapide » en français) joue deux rôles.

• En développement (npm run dev), c'est un serveur web local qui compile chaque fichier à la demande, au moment où le navigateur le réclame. Quand on enregistre un fichier, il prévient la page, qui remplace le module modifié sans se recharger : c'est le remplacement à chaud (hot module replacement). On voit le résultat en une fraction de seconde, sans perdre l'état de la page.
• En production (npm run build), il compile et assemble tout le projet en quelques fichiers optimisés, rangés dans le dossier dist, qu'un simple serveur web statique peut servir.

6.2 Créer un projet

L'équipe de Vue fournit un assistant, create-vue. Lancé sans option, il pose une série de questions : le nom du projet, puis, pour chaque outil (TypeScript, JSX, Vue Router, Pinia, Vitest, tests de bout en bout, ESLint, Prettier…), s'il faut l'ajouter. Les mêmes choix peuvent se donner en options ; ici, un projet JavaScript avec ESLint (le chemin du dossier est abrégé) :

$ npm create vue@latest ma-librairie -- --eslint

┌  Vue.js - The Progressive JavaScript Framework

Scaffolding project in …/ma-librairie...
│
└  Done. Now run:

   cd ma-librairie
   npm install
   npm run dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

Le projet créé contient un exemple de page (HelloWorld.vue, TheWelcome.vue…), des icônes, deux feuilles de style et les fichiers de configuration de Vite, d'ESLint et de l'éditeur. C'est un bon point de départ pour un projet réel ; l'option --default, elle, produit un projet TypeScript. Pour apprendre, nous partirons d'un projet plus dépouillé, dont chaque fichier est expliqué : le dossier premier-projet du chapitre.

{
  "name": "premier-projet",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "3.5.43"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "6.0.9",
    "vite": "8.3.2"
  }
}

Le champ "type": "module" indique que les fichiers .js du projet sont des modules ES (import et export), comme au livre JavaScript. Les versions sont épinglées ("3.5.43") ; l'assistant écrit plutôt "^3.5.42", qui accepte toute version 3.x plus récente, mais pas 4.0.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

La configuration de Vite active le greffon (plugin) de Vue, qui sait compiler les fichiers .vue.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Premier projet Vite</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

La page HTML est le point d'entrée : Vite la sert telle quelle, et suit son élément <script> de type module, qui charge src/main.js.

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");