Tutoriel VueJS 3 – Créer une application Vue

Une application Vue, c’est une instance créée par createApp et rattachée à un élément de la page. Ce chapitre installe le projet, puis affiche une première donnée à l’écran.

Créer le projet

Vue fournit un générateur officiel, create-vue, qui met en place un projet Vite configuré pour Vue. Ouvrez un terminal dans le dossier où vous rangez vos projets :

npm create vue@latest

Le générateur pose une série de questions. Pour ce tutoriel, répondez :

• Project name : boutique-vue
• TypeScript : Non, nous restons en JavaScript pour ne pas mélanger deux apprentissages.
• JSX, Vue Router, Pinia, ESLint, Prettier : Non. Nous les ajouterons quand ils seront utiles.
• Vitest : Oui si vous voulez écrire des tests, sinon Non.

Installez les dépendances puis démarrez le serveur de développement :

cd boutique-vue
npm install
npm run dev

Vite affiche une adresse, en général http://localhost:5173/. Ouvrez-la : la page d’accueil du projet s’affiche.

Ce que le générateur a créé

boutique-vue/
├── index.html          ← la seule vraie page HTML du site
├── package.json
├── vite.config.js
├── public/             ← fichiers servis tels quels
└── src/
    ├── main.js         ← point d’entrée : crée et monte l’application
    ├── App.vue         ← composant racine
    ├── assets/
    └── components/

Trois fichiers comptent pour l’instant. Le générateur crée aussi src/assets/main.css et base.css, le style de sa page d’accueil : vous pourrez les supprimer, avec la ligne import './assets/main.css' qui ouvre src/main.js, quand le CSS du tutoriel les remplacera en fin de chapitre.

index.html contient un conteneur vide et charge le point d’entrée. C’est tout : le reste de la page sera produit par Vue.

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

src/main.js crée l’application à partir du composant racine et la monte dans ce conteneur.

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp(App) construit l’instance, .mount('#app') lui donne l’élément du DOM qu’elle a le droit de gérer. À partir de là, tout ce qui se trouve dans <div id="app"> appartient à Vue.

Le premier composant

Un fichier .vue est un composant monofichier : le script, le gabarit et le style d’un même morceau d’interface vivent au même endroit. Videz src/App.vue et écrivez :

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
</script>

<template>
  <div class="product-display">
    <h1>{{ product }}</h1>
  </div>
</template>

Enregistrez : le navigateur affiche « T-Shirt » sans rechargement. C’est le remplacement de module à chaud de Vite.

Ce fichier va grossir jusqu’au chapitre sur les composants, où nous le découperons.

Comprendre ces sept lignes

<script setup> indique à Vue que ce bloc décrit la logique du composant. Tout ce que vous y déclarez au premier niveau est utilisable dans le gabarit, sans rien exporter.

ref('T-Shirt') crée une référence réactive : une boîte qui contient une valeur et prévient Vue quand elle change. Dans le script, on ouvre la boîte avec .value :

const product = ref('T-Shirt')

console.log(product.value)   // 'T-Shirt'
product.value = 'Pull'       // le titre change immédiatement à l’écran

Dans le gabarit, en revanche, on écrit {{ product }} sans .value : Vue déballe la référence automatiquement.

Les doubles accolades sont une interpolation. Elles acceptent n’importe quelle expression JavaScript, pas seulement un nom de variable :

<h1>{{ product }}</h1>
<h1>{{ product.toUpperCase() }}</h1>
<h1>{{ 'Notre ' + product }}</h1>

La réactivité, concrètement

Changez la valeur initiale en 'Pull' et enregistrez : le titre suit. Vous n’avez écrit aucune ligne pour aller chercher le h1 et modifier son contenu. C’est le cœur de Vue : vous décrivez ce que la page doit afficher en fonction de l’état, Vue se charge de la mise à jour.

Et les autres outils de build ?

create-vue installe Vite, qui est l’outil recommandé par l’équipe Vue. D’autres empaqueteurs compilent aussi les fichiers .vue : Parcel via @parcel/transformer-vue, ou webpack avec vue-loader.

Ils fonctionnent, mais ils sont plus lents et sortent des sentiers battus. Mesuré le 2 septembre 2026 sur la même application d’un seul composant :

Vite 8.2.2     build en  1,05 s   →  60,57 kB  (23,91 kB gzip)
Parcel 2.16.4  build en 10,57 s   →  92,77 kB

Le résultat de npm run build est un dossier de fichiers statiques. Ce qu’il contient décide de votre référencement, sujet traité à part.

Gardez Vite pour un nouveau projet. Les alternatives ne se justifient que si votre chaîne de build existante en dépend déjà.

Le CSS du tutoriel

Pour que l’application ressemble à quelque chose, créez src/assets/boutique.css avec les quelques règles utilisées tout au long des chapitres :

.product-display { display: flex; gap: 32px; padding: 24px; font-family: system-ui, sans-serif; }
.product-image img { width: 240px; }
.variants-wrapper { display: flex; gap: 10px; }
.color-circle { width: 50px; height: 50px; margin-top: 8px; border: 2px solid #d8d8d8; border-radius: 50%; cursor: pointer; }
.button { border: none; background: #1d4ed8; color: #fff; padding: 10px 18px; border-radius: 6px; cursor: pointer; }
.disabledButton { background-color: #d8d8d8; cursor: not-allowed; }

Et importez-le dans le point d’entrée :

import './assets/boutique.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')