Tutoriel VueJS 3 pour les débutants

Vue.js est un framework JavaScript progressif : on peut l’ajouter à une page existante en une balise script, ou construire une application complète avec un outil de build. Ce tutoriel prend la seconde voie, celle que suivent la documentation officielle et la quasi-totalité des projets d’aujourd’hui.

En onze chapitres, vous construisez une petite boutique : une fiche produit avec ses déclinaisons de couleur, un panier, un formulaire d’avis et les animations qui vont avec. Chaque notion arrive au moment où l’application en a besoin, jamais avant.

Ce que vous allez construire

Une seule application, enrichie chapitre après chapitre. À la fin, elle affiche un produit et son image, réagit au survol des couleurs, désactive le bouton quand la déclinaison est en rupture, remplit un panier, accepte des avis validés et les anime à l’affichage.

Le code est découpé en composants à partir du chapitre 8, comme dans un projet réel.

Le parcours en onze chapitres

1. Créer une application Vue, le projet, createApp, la première donnée réactive.
2. Liaison d’attributs, afficher l’image du produit avec v-bind.
3. Rendu conditionnel, dire si le produit est disponible, avec v-if et v-show.
4. Rendu de liste, la composition du tissu et les déclinaisons, avec v-for.
5. Gestion des événements, le bouton qui remplit le panier.
6. Liaison des classes et des styles, les pastilles de couleur et le bouton désactivé.
7. Propriétés calculées, déduire l’image et la disponibilité de la déclinaison choisie.
8. Composants et props, découper l’application et transmettre des données.
9. Communication des événements, faire remonter le clic vers le parent.
10. Formulaires et v-model, le formulaire d’avis et sa validation.
11. Transitions, animer les apparitions et les disparitions.

Le code complet est téléchargeable en haut de page : un projet Vite avec un dossier par chapitre et la suite de tests qui vérifie chacun d’eux.

Composition API : le style de ce tutoriel

Vue propose deux façons d’écrire un composant. L’Options API range le code dans des options : data, methods, computed. La Composition API l’écrit comme de simples variables et fonctions dans un bloc <script setup>.

Ce tutoriel utilise la Composition API, parce que c’est le style que la documentation officielle recommande pour un nouveau projet, et celui que vous rencontrerez dans la majorité du code écrit depuis Vue 3. Les deux styles restent pris en charge : l’Options API n’est pas dépréciée, et vous en croiserez longtemps dans les projets existants.

Voici la table de correspondance, à garder sous le coude.

// Options API                     // Composition API, dans <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // dans le script seulement,
                                             // jamais dans le template

Chaque chapitre concerné rappelle l’équivalent en Options API de la notion abordée.

Ce dont vous avez besoin

• Les bases de HTML, CSS et JavaScript. Si les fonctions fléchées et la déstructuration ne vous parlent pas, révisez-les avant de commencer.
• Node.js 22.18 ou plus récent (ou 24.12 et suivantes). Vérifiez avec node -v : le générateur de projet officiel refuse les versions antérieures. Mettez aussi npm à jour avec npm install -g npm@latest : le npm 10 livré avec Node 22 échoue sur npm install d’un projet Vue neuf.
• Un éditeur de code. Visual Studio Code avec l’extension officielle « Vue – Official » donne l’autocomplétion dans les fichiers .vue. WebStorm et Zed conviennent également.

Aucune connaissance de Vue 2 n’est nécessaire. Si vous en venez, retenez que Vue.use, Vue.mixin et Vue.prototype n’existent plus : tout passe désormais par l’instance d’application que renvoie createApp.

Comment travailler ce tutoriel

Tapez le code plutôt que de le copier. Après chaque chapitre, cassez volontairement quelque chose et lisez le message d’erreur : c’est le meilleur moyen d’apprendre à les décoder.

Chaque chapitre se termine par un exercice qui porte sur la notion abordée et se résout avec ce que vous venez d’écrire.

Après ce tutoriel

Pour brancher l’application sur de vraies données, voyez comment ajouter Firebase à une application Vue.

Une fois les onze chapitres terminés, la suite logique est le partage d’état entre composants avec Pinia, puis le routage avec Vue Router. Côté architecture, voyez comment écrire vos propres plugins Vue, et comment traiter le référencement d’une application Vue.