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
Quand vous chargez une page web, le HTML doit être généré quelque part. Selon où et quand il est généré, on parle de méthodes de rendu différentes.
CSR — Client-Side Rendering
C'est ce que nous faisons dans ce cours. Le serveur envoie un HTML quasi vide + le bundle JavaScript, et c'est votre navigateur qui construit la page.
- ✅ Très interactif, faible coût serveur
- ❌ SEO limité (les robots voient une page vide), premier rendu plus lent
- 🌐 Hébergement : tout hébergeur statique (Vercel, GitHub Pages, Infomaniak)
SSR — Server-Side Rendering
Le HTML est généré côté serveur à chaque requête, puis « hydraté » côté client pour devenir interactif.
- ✅ Bon SEO, premier rendu rapide
- ❌ Nécessite un runtime Node, coût serveur plus élevé
- 📚 Framework typique côté Vue : Nuxt 3 (équivalent de Next.js côté React)
SSG — Static Site Generation
Le HTML est pré-généré au build (une seule fois), puis servi comme fichier statique.
- ✅ Ultra-rapide, gratuit à héberger, très sécurisé
- ❌ Pas de contenu dynamique sans relancer le build
- 📚 Exemple concret : devjs.ch est un site SSG construit avec VitePress
Et la PWA ?
La PWA (Progressive Web App) n'est pas une méthode de rendu : c'est une couche transverse qui s'ajoute par-dessus n'importe quel mode (CSR, SSR, SSG) pour permettre d'installer la web app comme une vraie application mobile, avec mode hors ligne.
Que choisir ?
- App interactive, données privées (login) → CSR (comme notre Pokédex)
- Site marketing ou blog, SEO important → SSR ou SSG
- Documentation, contenu statique → SSG (comme devjs.ch)
Alternatives à Vuetify
D'autres librairies UI existent pour Vue.js :
| Librairie | Style |
|---|---|
| Quasar | Material Design |
| PrimeVue | Propre |
| Nuxt UI | Tailwind CSS |