Introduction à Vue.js
Présentation
Qu'est-ce que Vue.js ?
Vue.js est un framework JavaScript créé par Evan You en 2014. Après avoir travaillé chez Google sur AngularJS, il a voulu créer un outil plus simple et accessible.
C'est quoi un framework ?
Un framework est une boîte à outils qui fournit une structure et des fonctionnalités prêtes à l'emploi. Plutôt que de tout coder vous-même, vous utilisez les outils du framework pour aller plus vite.
Vue.js est un framework progressif : on peut l'utiliser pour ajouter un peu d'interactivité à une page existante, ou pour construire une application web complète.
Évolution de Vue.js
| Version | Année | Nom de code | Nouveautés majeures |
|---|---|---|---|
| 1.0 | 2015 | Evangelion | Première version stable |
| 2.0 | 2016 | Ghost in the Shell | Virtual DOM, rendu côté serveur |
| 3.0 | 2020 | One Piece | Composition API, performances accrues |
| 3.5 | 2024 | - | Améliorations TypeScript |
Le saviez-vous ?
Les noms de code des versions de Vue.js sont des références à des animes japonais !
Pourquoi choisir Vue.js ?
Vue.js se distingue par trois qualités :
| Qualité | Description |
|---|---|
| Accessible | Basé sur HTML, CSS et JavaScript — vous savez déjà presque tout ! |
| Progressif | Apprenez petit à petit, pas besoin de tout maîtriser d'un coup |
| Performant | Léger (~10 Ko) et optimisé pour être rapide |
Pour ce cours
Nous avons choisi Vue.js car sa syntaxe ressemble au HTML/CSS/JS que vous connaissez déjà. Les concepts appris sont ensuite transférables à React ou Angular.
Vue.js vs React
Vue.js et React sont les deux frameworks JavaScript les plus populaires. Voici leurs principales différences :
| Critère | Vue.js | React |
|---|---|---|
| Syntaxe | Templates HTML classiques | JSX (mélange HTML/JavaScript) |
| Apprentissage | Progressif et doux | Plus difficile au début |
| Écosystème | Cohérent (même équipe) | Fragmenté (librairies externes) |
| Créateur | Communauté open source | Meta (Facebook) |
En résumé : Vue.js est plus accessible pour débuter, React est plus répandu en entreprise. Les deux sont d'excellents choix.
Le Virtual DOM
Vous connaissez le DOM (Document Object Model) : c'est la représentation de votre page HTML que JavaScript peut manipuler. Le problème ? Modifier le DOM est lent car le navigateur doit tout recalculer.
Vue.js utilise une astuce : le Virtual DOM. C'est une copie légère du DOM en JavaScript.
Comment ça marche :
- Vos données changent
- Vue met à jour le Virtual DOM (très rapide, c'est juste du JavaScript)
- Vue compare l'ancien et le nouveau Virtual DOM
- Seules les différences sont appliquées au vrai DOM
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Données │ ──▶ │ Virtual DOM │ ──▶ │ DOM réel │
│ │ │ (compare) │ │ (mise à jour│
│ │ │ │ │ minimale) │
└─────────────┘ └─────────────┘ └─────────────┘Résultat : Vue.js est très performant, même avec des interfaces complexes.
Vuetify : notre librairie de composants
Dans ce cours, nous utilisons Vuetify, une bibliothèque de composants visuels basée sur Material Design de Google.
Vuetify fournit des composants prêts à l'emploi : boutons, cartes, formulaires, menus, etc. Plus besoin de tout styliser vous-même !
Exemple : un bouton Vuetify
<v-btn color="primary" prepend-icon="mdi-check">
Valider
</v-btn>
Avec une seule ligne, vous obtenez un bouton stylisé avec une icône. Sans Vuetify, il faudrait écrire le HTML, le CSS, gérer les états hover/focus...
Pourquoi Vuetify ?
- Gain de temps — Composants prêts à l'emploi
- Cohérent — Tous les composants suivent Material Design
- Responsive — Adapté mobile par défaut
- Documenté — Exemples pour chaque composant
Documentation : vuetifyjs.com
Les composants Vue (SFC)
C'est quoi un composant ?
Un composant est un bloc réutilisable de votre interface. Par exemple : un bouton, une carte, un menu, un formulaire...
En Vue.js, chaque composant est un fichier .vue appelé Single File Component (SFC). Il contient trois sections :
<script setup>
// JavaScript : données et logique
import { ref } from 'vue'
const message = ref('Bonjour !')
</script>
<template>
<!-- HTML : structure du composant -->
<h1>{{ message }}</h1>
</template>
<style scoped>
/* CSS : styles du composant */
h1 {
color: deeppink;
}
</style>| Section | Contenu |
|---|---|
<script setup> | La logique JavaScript (données, fonctions) |
<template> | Le HTML du composant |
<style scoped> | Le CSS, isolé à ce composant uniquement |
Pourquoi scoped ?
Le mot-clé scoped sur le style signifie que le CSS ne s'applique qu'à ce composant. Pas de conflit avec les autres composants !
Découper une application en composants
L'idée centrale de Vue.js est de diviser l'interface en petits blocs réutilisables.
Plutôt qu'un seul fichier HTML géant, on découpe la page :
Dans cet exemple :
- Header — Logo et navigation (réutilisé sur toutes les pages)
- Sidebar — Menu latéral
- Content — Zone principale avec plusieurs Cards
- Footer — Pied de page
Chaque bloc = un fichier .vue indépendant.
| Avantage | Explication |
|---|---|
| Réutilisation | Une Card utilisée 10 fois = 1 seul fichier à maintenir |
| Maintenance | Modifier le header ? Un seul fichier à changer |
| Clarté | Chaque composant a une responsabilité précise |
Penser en composants
Quand vous concevez une interface, demandez-vous : "Quels éléments se répètent ?" Ce sont vos futurs composants.
La réactivité : ref et reactive
En JavaScript classique, si vous modifiez une variable, l'affichage ne se met pas à jour automatiquement. En Vue.js, grâce à la réactivité, l'affichage se met à jour tout seul !
Pour rendre une donnée réactive, on utilise ref() :
<script setup>
import { ref } from 'vue'
const compteur = ref(0)
function incrementer() {
compteur.value++ // .value pour accéder à la valeur
}
</script>
<template>
<p>Compteur : {{ compteur }}</p>
<button @click="incrementer">+1</button>
</template>Comment ça marche ?
ref(0)crée une variable réactive initialisée à 0- Dans le script, on accède à la valeur avec
.value - Dans le template, Vue affiche automatiquement la valeur (sans
.value) - Quand la valeur change, l'affichage se met à jour automatiquement
Attention
Il faut importer ref depuis 'vue' au début du script !
ref vs reactive
Il existe aussi reactive() pour les objets :
import { ref, reactive } from 'vue'
// ref : pour les valeurs simples
const age = ref(25)
age.value = 26 // .value obligatoire
// reactive : pour les objets
const utilisateur = reactive({ nom: 'Alice', age: 25 })
utilisateur.age = 26 // pas de .value| Type de donnée | Utiliser | Accès |
|---|---|---|
| String, Number, Boolean | ref() | .value dans le script |
| Objet, Tableau | reactive() | Direct (pas de .value) |
Conseil pour débuter
Utilisez ref() pour tout au début. C'est plus simple et ça fonctionne dans tous les cas !
Ressources
Documentation officielle
- Vue.js (FR) — Guide complet en français
- Tutoriel interactif — Apprenez en codant
- Vuetify — Documentation des composants
Outils
- Vue DevTools — Extension navigateur indispensable
Aide-mémoire
Pour aller plus loin
Cette section présente des concepts avancés que vous découvrirez progressivement.
L'écosystème Vue.js
Vue.js propose des outils complémentaires maintenus par la même équipe :
| Outil | Usage |
|---|---|
| Vue Router | Navigation entre pages |
| Pinia | Partager des données entre composants |
| Nuxt | Framework complet (SEO, serveur, etc.) |
| Vite | Outil de build ultra-rapide |
Méthodes de rendu
Vue.js supporte plusieurs façons de générer les pages :
| Méthode | Description | SEO |
|---|---|---|
| CSR | Le navigateur génère la page (ce cours) | ❌ |
| SSR | Le serveur génère la page | ✅ |
| SSG | Pages pré-générées au build | ✅ |
Pour ce cours, nous utilisons le CSR (Client-Side Rendering), la méthode la plus simple.
Alternatives à Vuetify
D'autres librairies UI existent pour Vue.js :
| Librairie | Style |
|---|---|
| Quasar | Material Design |
| PrimeVue | Propre |
| Nuxt UI | Tailwind CSS |