frontend / vuejs

Pourquoi Vue.js & premier composant

Leçon 11 exercice

Explication

Un peu d'histoire

Vue.js est créé en 2014 par Evan You, un ancien employé de Google qui travaillait notamment sur des projets utilisant Angular. Frustré par la lourdeur d'Angular pour des besoins plus simples, il développe pendant son temps libre un framework léger qui reprendrait "les bonnes idées d'Angular sans tout le reste". Le succès est rapide et largement porté par la communauté open source plutôt que par une grande entreprise (contrairement à React porté par Facebook/Meta, ou Angular par Google). Depuis, Vue a traversé trois versions majeures, la version 3 (2020) marquant un tournant avec la réécriture complète en TypeScript et l'introduction de la Composition API.

Pourquoi apprendre Vue.js aujourd'hui

Vue.js s'est imposé comme l'un des trois grands frameworks frontend aux côtés de React et Angular, avec une réputation de courbe d'apprentissage plus douce et une documentation officielle considérée comme parmi les meilleures de l'écosystème JavaScript. De nombreuses entreprises françaises et internationales (GitLab, Adobe, Alibaba) l'utilisent en production, et son approche "progressive" — utilisable aussi bien pour une simple interactivité ponctuelle que pour une application complète — en fait un choix pertinent aussi bien pour les débutants que pour des architectures d'entreprise exigeantes.

Ce que vous allez apprendre

Comprendre ce que signifie "framework progressif" et pourquoi ça change la façon d'adopter Vue
Distinguer l'usage minimal via CDN de l'usage professionnel avec Vite et les Single File Components
Écrire un premier composant avec <script setup>, la syntaxe moderne de la Composition API
Créer une valeur réactive avec ref() et comprendre pourquoi .value est nécessaire en JavaScript mais pas dans le template
Démarrer une application Vue et la monter sur un élément du DOM

Dans quel contexte ?

Une équipe doit ajouter un peu d'interactivité à une page existante (un compteur, un menu déroulant) sans reconstruire tout le site en single-page application. Vue permet de commencer avec un simple script CDN sur cette seule page, puis, si le besoin grandit, de migrer progressivement vers une application complète outillée avec Vite — sans jamais avoir à tout réécrire depuis zéro dès le départ.

D'abord, un framework qu'on adopte petit à petit

Contrairement à d'autres frameworks qui imposent une structure de projet complète dès le premier jour, Vue peut s'utiliser directement dans une balise <script> chargée depuis un CDN, sans aucune installation ni étape de compilation. C'est un excellent point de départ pour comprendre les concepts de base avant de s'attaquer à l'outillage professionnel.

Prérequis

Une bonne maîtrise de JavaScript moderne (fonctions, objets, const/let) est nécessaire. Aucune connaissance préalable d'un framework frontend n'est requise.

Ensuite, l'usage professionnel avec Vite

Une fois les bases comprises, npm create vue@latest génère un projet complet avec Vite, un bundler rapide qui gère la compilation, le rechargement à chaud (Hot Module Replacement) et la construction de production. Le CLI propose d'emblée les briques d'un projet sérieux : TypeScript, Vue Router, Pinia, Vitest.

Approche	Installation	Cas d'usage
Script CDN	Aucune	Prototypage, petite interactivité sur une page existante
Projet Vite	`npm create vue@latest`	Application complète, outillée, professionnelle

Il reste à comprendre la brique de base : le Single File Component

Un fichier .vue regroupe en un seul endroit le template (HTML), la logique (<script setup>) et le style (<style scoped>) d'un composant. C'est une différence notable avec certains frameworks qui séparent ces trois aspects dans des fichiers distincts : ici, tout ce qui concerne un composant reste localisé au même endroit, plus facile à maintenir.

<style scoped> limite l'application du CSS à ce seul composant, évitant qu'une règle comme h1 { color: ... } ne déborde accidentellement sur le reste de l'application.

Maintenant, la brique la plus fondamentale de la réactivité

ref() enveloppe une valeur dans un objet réactif : Vue peut ainsi détecter quand cette valeur change et mettre à jour automatiquement tout ce qui en dépend dans l'interface. En JavaScript, on accède à cette valeur via .value (compteur.value++), mais dans le template, Vue déballe automatiquement cette valeur — on écrit simplement {{ compteur }}.

Piège fréquent

Oublier .value en dehors du template est l'erreur la plus fréquente des débutants sur Vue 3 : compteur++ (sans .value) ne fonctionne pas et ne déclenche aucune réactivité, contrairement à compteur.value++. Cette règle sera approfondie dans la prochaine leçon sur la réactivité.

Maintenant que tu as créé ton premier composant, la prochaine leçon explore en détail la syntaxe des templates : comment lier dynamiquement des attributs, des classes et des événements au DOM.

Commandes & code

Pourquoi Vue.js & premier composant

Framework progressif : on l'adopte petit à petit, du script CDN jusqu'à une SPA complète outillée.

<!-- Usage minimal : aucune installation, juste un CDN -->
<!DOCTYPE html>
<html>
<body>
  <div id="app">
    <!-- {{ }} interpole une expression JS réactive -->
    <h1>{{ message }}</h1>
    <button @click="compteur++">Compteur : {{ compteur }}</button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Bonjour Vue !')
        const compteur = ref(0)
        return { message, compteur }
      }
    }).mount('#app')
  </script>
</body>
</html>

# Usage professionnel : scaffolding officiel avec Vite (bundler rapide)
npm create vue@latest mon-projet

# Options proposées par le CLI :
#   TypeScript ? Oui
#   JSX ? Non
#   Vue Router ? Oui
#   Pinia (state management) ? Oui
#   Vitest (tests unitaires) ? Oui
#   ESLint / Prettier ? Oui

cd mon-projet
npm install
npm run dev     # serveur de dev avec Hot Module Replacement
npm run build    # build de production optimisé

<!-- src/components/HelloWorld.vue -->
<!-- Un fichier .vue = Single File Component (SFC) : template + logique + style -->
<script setup>
// <script setup> est le sucre syntaxique moderne de la Composition API :
// tout ce qui est déclaré ici est automatiquement exposé au template.
import { ref } from 'vue'

const nom = ref('Vue')
const compteur = ref(0)

function incrementer() {
  compteur.value++   // .value obligatoire hors template car ref() est un wrapper réactif
}
</script>

<template>
  <h1>Bonjour, {{ nom }} !</h1>
  <!-- Dans le template, .value est déballé automatiquement -->
  <button @click="incrementer">Cliqué {{ compteur }} fois</button>
</template>

<style scoped>
/* scoped : ce CSS ne s'applique qu'à ce composant */
h1 {
  color: #42b883;
}
</style>

// src/main.js — point d'entrée de l'application
import { createApp } from 'vue'
import App from './App.vue'

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

Résumé

Vue s'utilise aussi bien en simple script CDN qu'en application outillée avec Vite.
Un fichier .vue (Single File Component) regroupe template, logique (<script setup>) et style (<style scoped>).
ref() crée une valeur réactive ; on la lit/écrit via .value en JS, mais elle est déballée automatiquement dans le template.
createApp(...).mount('#app') démarre l'application sur un élément du DOM.

Exercices pratiques

1 disponible

Mission : dépanner un compteur muet

Objectif : Diagnostiquer pourquoi un compteur Vue n'affiche jamais ses mises à jour, puis livrer un composant fonctionnel.

Contexte

Un collègue a codé un premier composant Vue pour un compteur de clics, mais rien ne se passe à l'écran quand on clique sur le bouton : le chiffre reste bloqué à 0. Il a écrit let compteur = ref(0) puis, dans la fonction appelée au clic, compteur++. Avant de corriger quoi que ce soit, tu dois comprendre précisément pourquoi ce code ne réagit pas.

Résoudre l’exercice →