Créer des applications web modernes
Défiler pour commencer
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.
Vue.js est un framework progressif : utilisable comme une simple librairie ou comme un framework complet pour des applications complexes.
2015 — Evangelion
Première version stable
2016 — Ghost in the Shell
Virtual DOM, rendu serveur
2020 — One Piece
Composition API, performances
2024
Améliorations TypeScript
💡 Les noms de code sont des références à des animes japonais !
Documentation Vue.js →Léger (~10 Ko) et optimisé pour être rapide grâce au Virtual DOM
Basé sur HTML, CSS et JavaScript — vous savez déjà presque tout !
Adoptez-le progressivement, d'une simple page à une application complète
💡 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.
Le DOM (Document Object Model) est la représentation de votre page HTML en mémoire. Modifier le DOM directement est lent car le navigateur doit recalculer les styles et réafficher la page.
Vue.js utilise un Virtual DOM : une copie légère du DOM en JavaScript. Seules les différences sont appliquées au vrai DOM.
Données
(state)
Virtual DOM
(diff)
DOM réel
(minimal)
Bibliothèque de composants basée sur Material Design de Google. Créez rapidement des interfaces élégantes et professionnelles.
📖 Bien documenté
Exemples pour chaque composant
🎨 Cohérent
Material Design garantit l'harmonie
📱 Responsive
Adapté mobile par défaut
♿ Accessible
Respect des normes ARIA
Exemple : v-btn
<v-btn color="primary"
prepend-icon="mdi-check">
Valider
</v-btn>
Un composant est un bloc réutilisable de votre interface. Par exemple : un bouton, une carte, un menu, un formulaire...
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 en composants indépendants.
Menu latéral
Zone principale avec Cards
Chaque bloc = un fichier .vue
♻️ Réutilisation
Une Card utilisée 10 fois = 1 seul fichier
🔧 Maintenance
Modifier le header ? Un seul fichier
📋 Clarté
Chaque composant a une responsabilité
<script setup> import { ref } from 'vue' const message = ref('Bonjour !') </script> <template> <h1>{{ message }}</h1> </template> <style scoped> h1 { color: deeppink; } </style>
Logique JavaScript : données, fonctions, imports
Structure HTML du composant
Styles CSS isolés au composant
✨ Avantages
Organisation • Isolation • Réutilisation • Maintenance facilitée
const compteur = ref(0) // Modifier compteur.value++ // Dans le template {{ compteur }}
⚠️ Utiliser .value dans le script
const user = reactive({ nom: 'Alice', age: 25 }) // Modifier user.age++
✅ Pas besoin de .value
💡 Astuce
En cas de doute, utilisez ref() — ça marche pour tout !
Extension navigateur indispensable pour déboguer vos applications Vue.js. Elle permet d'inspecter les composants, leurs données et l'état de l'application.
🔍 Inspecter les composants
Voir la hiérarchie complète de vos composants Vue
📊 Visualiser les données
Voir et modifier les ref() et reactive() en temps réel
🏪 Explorer Pinia
Inspecter le state management de l'application
⚡ Analyser les performances
Identifier les goulots d'étranglement
💡 Comment l'utiliser ?
✨ Le code se corrige automatiquement à la sauvegarde !
npm create vuetify
cd hello-world
npm run dev
🌐 http://localhost:3000
Project name
hello-world
Which preset?
Recommended ✓
Use TypeScript?
No
Package manager?
npm ✓
Install dependencies?
Yes ✓
index.html
Point d'entrée HTML (lang="fr")
main.js
Initialise Vue, Vuetify, plugins
App.vue
Composant racine de l'application
🔥 Hot Reload
Modifiez un fichier, sauvegardez (Ctrl+S), et la page se met à jour automatiquement !
Vite (prononcé "vite" en français !) est l'outil qui compile et sert votre application Vue.js pendant le développement.
Démarrage instantané
Pas besoin d'attendre — le serveur démarre en millisecondes
Hot Module Replacement (HMR)
Modifiez votre code → la page se met à jour sans recharger
Build optimisé
Génère des fichiers minifiés et optimisés pour la production
Vite utilise les ES modules natifs du navigateur — pas besoin de tout recompiler à chaque changement.
💡 Créé par Evan You
Le créateur de Vue.js a aussi créé Vite pour remplacer les outils lents comme Webpack.
npm run dev
Serveur de développement
npm run build
Compiler pour la production
npm run preview
Prévisualiser le build
npm run lint
Vérifier la qualité du code
npm install <package>
Ajouter une dépendance
npm update
Mettre à jour les packages
⚠️ Arrêter le serveur
Utilisez Ctrl + C dans le terminal
export default defineConfig({ base: '/nom-du-repo/', // ... autres options })
Créer .github/workflows/deploy.yml
Settings → Pages → Source: GitHub Actions
🚀 Déploiement automatique à chaque push !
⚠️ Ne jamais coder sur main !
Chaque push sur main = mise en production immédiate
Gratuit
Pour les dépôts publics
Automatique
Déploie à chaque commit
HTTPS inclus
Certificat SSL gratuit
CDN mondial
Chargement rapide partout
Staging (GitHub Pages)
Chaque push sur main → Tests
Production (Infomaniak)
Chaque release → Site public
💡 Avantage
Tester sur staging avant de publier en production. Pas de surprise !
1. Créer un tag de version
git tag v1.0.0
2. Pousser le tag
git push origin v1.0.0
Semantic Versioning
MAJEUR : breaking changes
MINEUR : nouvelles fonctionnalités
PATCH : corrections de bugs
Mettons en pratique les concepts du tutoriel Vue.js (étapes 1-7) en créant un mini Pokédex ensemble !
{{ }}
Interpolation
:attr
Liaisons
@click
Événements
v-model
Formulaires
v-if
Conditionnel
v-for
Listes
computed()
Propriétés calculées
<script setup> import { ref, computed } from 'vue' const pokemons = ref([ { name: 'Pikachu', type: 'Electric' }, { name: 'Bulbasaur', type: 'Grass' }, { name: 'Charmander', type: 'Fire' }, { name: 'Squirtle', type: 'Water' }, { name: 'Jolteon', type: 'Electric' }, ]) // TODO: ref pour le nom // TODO: ref pour le filtre // TODO: computed filteredPokemons // TODO: function addPokemon() </script> <template> <h1>Mon Pokédex</h1> <!-- TODO: input + button --> <!-- TODO: checkbox filtre --> <!-- TODO: v-for liste --> </template>
📋 Copiez le code de départ dans src/App.vue
Documentation officielle en français
Composants Material Design
Apprendre en codant
Ouvrez votre terminal et lancez :
npm create vuetify