Ton premier composant Vue

Ce que tu vas apprendre

• Ce qu'est Vue et à quoi sert un composant.
• Créer un projet Vue 3 et le lancer sur ton ordinateur.
• Lire un fichier .vue : ses trois blocs <script setup>, <template> et <style>.

Vue, c'est quoi ?

Vue est un framework JavaScript qui construit des interfaces web. Tu décris ce que la page doit afficher, et Vue met l'affichage à jour tout seul quand tes données changent.

Tu n'as plus à chercher des éléments HTML pour modifier leur texte. Tu modifies une variable, et la page suit.

Dans tout ce cours, on utilise Vue 3 avec la Composition API et <script setup>. C'est la façon d'écrire que la documentation associe aux fichiers .vue.

Créer un projet

Il te faut Node.js, que tu as croisé avec JavaScript. La documentation demande la version ^22.18.0 ou >=24.12.0. Ensuite, dans un terminal :

npm create vue@latest

Cette commande lance l'outil officiel de création de projet. Il te demande le nom du projet, puis pose des questions oui ou non : TypeScript, Vue Router, Pinia, tests, ESLint, Prettier...

Si tu hésites sur une option, la documentation conseille de répondre « non ».

Pour lancer le projet :

cd mon-site-recettes
npm install
npm run dev

Le terminal affiche une adresse locale. Ouvre-la dans ton navigateur pour voir ton application.

Le composant monofichier

Un composant est un morceau d'interface réutilisable : un bouton, une carte de recette, un menu. Vue le range dans un composant monofichier (en anglais single-file component, ou SFC), un fichier .vue qui regroupe la logique, le HTML et le style.

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

const nombre = ref(0)
</script>

<template>
  <button @click="nombre++">
    Recettes aimées : {{ nombre }}
  </button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

Ce fichier contient trois blocs :

Ce qui se passe dans <script setup>

L'attribut setup permet à Vue de transformer le code à la compilation. Les imports et les variables déclarés au premier niveau du script sont utilisables directement dans le template, sans rien exporter.

Ici, nombre est déclaré avec ref(0). Un ref est une valeur que Vue surveille : quand elle change, l'affichage est mis à jour. On le détaille au chapitre sur la réactivité.

Dans le template, {{ nombre }} affiche la valeur et @click="nombre++" ajoute 1 à chaque clic.

Utiliser un composant dans un autre

Dans <script setup>, un composant importé est utilisable tout de suite dans le template :

<script setup>
import CompteurRecettes from './components/CompteurRecettes.vue'
</script>

<template>
  <h1>Mes recettes</h1>
  <CompteurRecettes />
  <CompteurRecettes />
</template>

Chaque <CompteurRecettes /> est une copie indépendante. Cliquer sur l'un ne change pas l'autre : chaque composant garde ses propres données.

Les trois blocs dans la pratique

Le bloc <style scoped> évite les mauvaises surprises : la règle button du composant ci-dessus ne touche pas les boutons des autres composants. Sans scoped, le CSS s'appliquerait à toute la page.

Garde une règle simple : un fichier .vue par composant, et un composant par idée (une carte de recette, une liste, un formulaire).

Pour t'exercer

Crée un composant MessageAccueil.vue qui affiche un titre et le nombre de recettes d'une variable total. Importe-le dans App.vue et affiche-le deux fois. Tu as alors manipulé tout ce chapitre.

À retenir

• Vue met l'affichage à jour tout seul quand les données changent.
• npm create vue@latest crée un projet, puis npm install et npm run dev le lancent.
• Un composant monofichier .vue regroupe <script setup>, <template> et <style scoped>.
• Ce que tu déclares dans <script setup> est utilisable dans le template.
• On importe un composant, puis on l'écrit comme une balise, en PascalCase.