Cours Vue.js Complet 💚

Les 12 chapitres essentiels — Composition API, réactivité, directives et écosystème

Chapitres

100+

Exemples de code

Vue 3.5+

Version

A1→C2

Niveaux

📋 Sommaire

1. Introduction et installation
7. Composables (hooks Vue)
2. Template et directives
8. Cycle de vie et watchers
3. Réactivité (ref et reactive)
9. Formulaires
4. Computed et méthodes
10. Vue Router
5. Composants et props
11. Pinia (state management)
6. Événements et slots
12. Écosystème et bonnes pratiques

📚 Voir aussi nos autres cours

🏠 Hub Programmation
⚡ JavaScript (prérequis)
🔷 TypeScript
⚛️ React
☁️ AWS Cloud Practitioner

CHAPITRE 01

Introduction et installation

💚 Premier composant Vue

scoped>
h1

Vue.js est un framework progressif. Créé par Evan You en 2014, Vue combine le meilleur de React (composants, virtual DOM) et d'Angular (directives, two-way binding). Son approche SFC (Single File Component) regroupe template, logique et style dans un seul fichier .vue.

⚙️ Créer un projet

# Créer un projet Vue 3
npm create vue@latest mon-app
# ✅ TypeScript? Yes
# ✅ Vue Router? Yes
# ✅ Pinia? Yes

cd mon-app
npm install
npm run dev # → http://localhost:5173 (Vite)

# Structure :
# mon-app/
# ├── src/
# │ ├── main.ts (point d'entrée)
# │ ├── App.vue (composant racine)
# │ ├── components/
# │ ├── views/ (pages)
# │ ├── router/
# │ └── stores/ (Pinia)
# ├── public/
# └── vite.config.ts

🏗️ Vue.js en résumé

Caractéristique	Vue.js
Paradigme	Composants + réactivité fine-grained
API	Composition API (recommandée) + Options API
Fichiers	SFC (.vue) : template + script + style
Réactivité	Proxy-based (automatique et fine-grained)
Tooling	Vite (build), Vue Devtools, Volar (IDE)
Écosystème	Vue Router, Pinia, Nuxt (SSR), VueUse

🧠 Quiz

Quelle est la différence entre Options API et Composition API ?

Options API = organise le code par type (data, methods, computed, watch) dans un objet. Composition API (

📦 reactive — objets réactifs

Règle simple : utilisez ref() pour tout (strings, nombres, tableaux, objets). C'est le choix recommandé. reactive() est un cas spécial pour les objets complexes où .value est gênant. En cas de doute, ref().

🧠 Quiz

Pourquoi .value avec ref() dans le script mais pas dans le template ?

ref() enveloppe la valeur dans un objet pour traquer les changements. Dans le script, il faut accéder à .value. Dans le template, Vue fait l'auto-unwrap automatiquement pour la lisibilité.

CHAPITRE 04

Computed et méthodes

🧮 computed — valeurs dérivées (cachées)

computed vs méthode : un computed est caché — il ne se recalcule que si ses dépendances changent. Une méthode s'exécute à chaque rendu. Utilisez computed pour les valeurs dérivées de l'état, les méthodes pour les actions/événements.

CHAPITRE 05

Composants et props

🧱 Composants et props

Les props sont en lecture seule (comme en React). Un composant enfant ne doit jamais modifier ses props. Si l'enfant a besoin de modifier une valeur, il émet un événement vers le parent.

CHAPITRE 06

Événements et slots

📡 emit — communication enfant → parent

 @increment=« count += $event » @reset=« count = 0 » />

🎰 Slots — contenu flexible

Mon contenu personnalisé

#header>Mon titre

Contenu principal

#footer>Pied de page

CHAPITRE 07

Composables (hooks Vue)

🔧 Composables — logique réutilisable

// composables/useFetch.ts
import from 'vue'

export function useFetch<T>(url: string)

// composables/useToggle.ts
export function useToggle(initial = false)

Les composables sont l'équivalent des custom hooks de React. Convention : use + nom (useFetch, useAuth, useTheme). La bibliothèque VueUse contient 200+ composables prêts à l'emploi.

CHAPITRE 08

Cycle de vie et watchers

🔄 Lifecycle hooks

👁️ watch et watchEffect

watch vs watchEffect : watch = vous spécifiez explicitement quoi observer (+ accès ancien/nouveau). watchEffect = détecte automatiquement les dépendances (comme useEffect de React). Pour les side effects simples, watchEffect est plus concis.

CHAPITRE 09

Formulaires

📝 v-model — two-way binding

v-model = raccourci pour :value + @input. C'est le two-way binding de Vue. En React, il faudrait gérer value + onChange manuellement. Vue le fait en une directive. Les modifiers (.trim, .number, .lazy) ajoutent des traitements automatiques.

CHAPITRE 10

Vue Router

🧭 Configuration du router

// router/index.ts
import from 'vue-router'

const router = createRouter()

// Navigation guard
router.beforeEach((to, from) => )

export default router

// Navigation programmatique
import from 'vue-router'

const router = useRouter()
const route = useRoute()

router.push('/dashboard')
router.replace('/login')
router.back()
route.params.id // Paramètre dynamique
route.query.q // Query string ?q=test

CHAPITRE 11

Pinia (state management)

🍍 Pinia — le store officiel de Vue

// stores/counter.ts
import from 'pinia'
import from 'vue'

// Setup store (Composition API style — recommandé)
export const useCounterStore = defineStore('counter', () => )

Pinia remplace Vuex (l'ancien store de Vue). Il est plus simple (pas de mutations), typé nativement, et utilise la Composition API. Chaque store est indépendant — pas de store monolithique.

CHAPITRE 12

Écosystème et bonnes pratiques

📋 Écosystème essentiel

Besoin	Librairie
Framework full-stack	Nuxt 3 (SSR, auto-imports, API routes)
État global	Pinia (officiel)
Routing	Vue Router (officiel)
Data fetching	TanStack Query / Nuxt useFetch
Formulaires	VeeValidate + Zod
UI Components	PrimeVue / Vuetify / Radix Vue
Composables utilitaires	VueUse (200+ composables)
Tests	Vitest + Vue Testing Library
IDE	VSCode + Volar

✅ Bonnes pratiques

✅ À FAIRE
•