Cours Vue.js Complet 💚
Les 12 chapitres essentiels — Composition API, réactivité, directives et écosystème
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
🏠 Hub Programmation
⚡ JavaScript (prérequis)
🔷 TypeScript
⚛️ React
☁️ AWS Cloud Practitioner
Introduction et installation
import from 'vue'
const message = ref('Bonjour le monde !')
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.
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
| 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 |
import from 'vue'
// reactive() = pour les objets (pas besoin de .value)
const user = reactive()
user.age++ // ✅ Pas de .value
user.address.city = 'Lyon' // ✅ Deep reactivity
// ⚠️ Ne PAS réassigner reactive
// user = ❌ Perd la réactivité
// ref() pour les tableaux (plus simple à réassigner)
const items = ref(['a', 'b', 'c'])
items.value.push('d') // ✅
items.value = items.value.filter(i => i !== 'b') // ✅
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().
Computed et méthodes
import from 'vue'
const firstName = ref('Alice')
const lastName = ref('Dupont')
const items = ref([
,
,
,
])
// computed = recalculé UNIQUEMENT quand ses dépendances changent
const fullName = computed(() => `$ $`)
const total = computed(() =>
items.value.reduce((sum, i) => sum + i.price, 0)
)
// computed avec getter ET setter (rare)
const fullNameWritable = computed({
get: () => `$ $`,
set: (val) => {
const [first, last] = val.split(' ')
firstName.value = first
lastName.value = last
}
})
Total: €
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.
Composants et props
// defineProps — déclarer les props (macro, pas d'import)
const props = defineProps<>()
// Avec valeurs par défaut
const props = withDefaults(defineProps<>(), )
ans
import UserCard from './components/UserCard.vue'
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.
Événements et slots
// defineEmits — déclarer les événements émis
const emit = defineEmits<>()
function handleClick()
Mon contenu personnalisé
Contenu principal
Composables (hooks Vue)
import from 'vue'
export function useFetch<T>(url: string)
// composables/useToggle.ts
export function useToggle(initial = false)
import from '@/composables/useFetch'
import from '@/composables/useToggle'
const = useFetch('/api/users')
const = useToggle()
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.
Cycle de vie et watchers
import from 'vue'
// Au montage (DOM prêt)
onMounted(() => )
// Au démontage (nettoyage)
onUnmounted(() => )
// Après chaque mise à jour du DOM
onUpdated(() => )
import from 'vue'
const query = ref( »)
const results = ref([])
// watch — réagir à un changement spécifique
watch(query, async (newVal, oldVal) => )
// watch avec options
watch(query, callback, )
// watch multiple sources
watch([query, page], ([newQuery, newPage]) => )
// watchEffect — détecte auto les dépendances (comme useEffect)
watchEffect(async () => )
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.
Formulaires
import from 'vue'
const form = reactive()
function handleSubmit()
Newsletter
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.
Vue Router
import from 'vue-router'
const router = createRouter()
// Navigation guard
router.beforeEach((to, from) => )
export default router
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
Pinia (state management)
import from 'pinia'
import from 'vue'
// Setup store (Composition API style — recommandé)
export const useCounterStore = defineStore('counter', () => )
import from '@/stores/counter'
import from 'pinia'
const store = useCounterStore()
// storeToRefs pour garder la réactivité lors du destructuring
const = storeToRefs(store)
const = store // Actions directement
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.
Écosystème et bonnes pratiques
| 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 |
✅ À FAIRE
•