Vue.js, l’alternative accessible
Vue.js est un framework front-end progressif, créé par Evan You, ancien ingénieur chez Google. Souvent comparé à React, Vue se distingue par sa simplicité de prise en main, sa documentation exemplaire, et une courbe d’apprentissage plus douce. Pour un développeur qui débute en frameworks front-end ou qui cherche une alternative à React, Vue mérite attention. Ce tutoriel présente Vue.js et ses concepts clés avec une approche pratique.
Pourquoi choisir Vue
Plusieurs atouts distinguent Vue. Simplicité : les concepts de base sont accessibles rapidement, même sans expérience framework. Syntaxe des templates lisible pour ceux venant de HTML. Documentation officielle considérée comme une des meilleures de l’écosystème JavaScript. Communauté active, particulièrement en Asie et en Europe. Intégration progressive possible : Vue peut s’ajouter à une page existante sans tout refondre.
Limites à connaître. Écosystème un peu moins vaste que React. Moins d’opportunités professionnelles en absolu (mais très demandé dans certaines zones). Moins utilisé dans les gros projets d’entreprise américains.
Vue 3, Composition API et Options API
Vue 3, sorti en 2020, a introduit la Composition API à côté de l’Options API historique. L’Options API organise le code par options (data, methods, computed, watch). La Composition API regroupe la logique par préoccupation fonctionnelle. Les deux coexistent ; Composition API est recommandée pour les nouveaux projets, particulièrement avec script setup.
Le tutoriel suivra la Composition API avec script setup, approche moderne.
Créer un projet Vue
npm create vue@latest. L’outil pose plusieurs questions : TypeScript, Vue Router (navigation), Pinia (state management), Vitest (tests), Playwright (E2E), ESLint, Prettier. Choisissez selon vos besoins ; pour débuter, TypeScript et Vue Router sont des ajouts utiles.
cd dans le projet créé, npm install, npm run dev. Le serveur de développement démarre avec Vite, offrant rechargement à chaud ultra-rapide.
Structure de projet
src/ contient le code. src/main.ts monte l’application. src/App.vue est le composant racine. src/components/ pour les composants réutilisables. src/views/ pour les pages. src/router/ pour la configuration de routage.
Votre premier composant
Créez src/components/Counter.vue :
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<div>
<p>Compteur : {{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<style scoped>
button { padding: 8px 16px; }
</style>
Un composant Vue rassemble script (logique), template (HTML), et style (CSS scoped) dans un seul fichier .vue. Cette cohabitation rend le composant autonome.
Réactivité : ref et reactive
ref crée une référence réactive pour une valeur primitive ou un objet. L’accès se fait via .value dans le script (pas dans le template où c’est automatique). reactive pour un objet, crée un proxy réactif, accès direct aux propriétés. Les deux ont leurs usages ; ref est plus simple pour débuter.
Computed properties : valeurs calculées qui se recalculent automatiquement quand leurs dépendances changent. const total = computed(() => count.value * 2).
Les directives
Vue offre des directives HTML spéciales préfixées par v-. v-if, v-else-if, v-else pour le rendu conditionnel. v-for pour les boucles. v-on (ou @) pour les événements. v-bind (ou 🙂 pour lier des attributs dynamiquement. v-model pour le binding bidirectionnel des formulaires.
Exemple : <input v-model= »name » /> lie la valeur du champ à la variable name, dans les deux sens.
Les props
Un composant peut recevoir des props du parent. defineProps déclare les props attendus :
<script setup lang="ts">
defineProps<{
title: string
count?: number
}>()
</script>
Le parent utilise le composant avec les props : <Counter title= »Mon compteur » :count= »5″ />. Le : devant count indique une liaison avec une variable ; sans le :, ce serait une chaîne littérale.
Les événements
Un composant enfant peut émettre des événements vers le parent. defineEmits déclare les événements. emit(‘nomEvenement’, données) les déclenche.
Le parent écoute : <Counter @increment= »handleIncrement » />. Ce découplage parent-enfant via props et events est un pattern central de Vue.
La réactivité approfondie
watch observe des valeurs réactives et réagit aux changements. watchEffect exécute une fonction et observe automatiquement ses dépendances. Utile pour des effets de bord : requêtes API, synchronisations, animations.
onMounted et onUnmounted sont des hooks de cycle de vie : exécuter du code à l’apparition ou à la disparition du composant.
Vue Router
Pour les applications multi-pages, Vue Router. Configuration dans src/router/index.ts : mapping des URLs vers les composants. <router-view /> dans App.vue affiche la vue active. <router-link to= »/about »>À propos</router-link> pour les liens de navigation.
Les routes dynamiques (/users/:id) passent des paramètres accessibles via useRoute().params.id.
Pinia pour le state management
Pour partager de l’état entre composants distants, Pinia (remplaçant de Vuex). Un store Pinia contient state, getters, actions.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})
Dans un composant : const store = useCounterStore(); Utilisez store.count, store.increment().
Les slots
Les slots permettent aux composants parents d’injecter du contenu dans les composants enfants. Équivalent du children de React.
Un composant Card peut définir <slot /> où viendra se placer le contenu : <Card>Contenu personnalisé</Card>. Les slots nommés (<slot name= »header »/>) permettent plusieurs points d’injection.
Les transitions et animations
Vue facilite les animations avec le composant <Transition>. Les éléments qui apparaissent et disparaissent peuvent être animés avec des classes CSS automatiquement appliquées. <TransitionGroup> pour des listes animées.
Le rendu côté serveur avec Nuxt
Nuxt est le meta-framework Vue équivalent à Next.js pour React. Il ajoute : rendu côté serveur (SSR), routage basé sur les fichiers, server routes (API), optimisations automatiques. Pour un projet SEO-friendly avec Vue, Nuxt est généralement le bon choix.
Les tests
Vitest pour les tests unitaires (rapide, intégré à Vite). Vue Test Utils pour tester les composants Vue spécifiquement. Playwright ou Cypress pour les tests end-to-end. L’écosystème de test est mature.
Vue pour les projets existants
L’ajout progressif est un avantage de Vue. Vous pouvez ajouter Vue à une page HTML statique pour ajouter de l’interactivité à une zone précise, sans refondre tout le site. Cette flexibilité est pratique pour moderniser progressivement.
L’écosystème
Composants UI : PrimeVue, Vuetify, Quasar Framework, Element Plus. Styling : compatible avec Tailwind CSS, CSS Modules, styled-components. Icons : Iconify, Lucide. Formulaires avancés : VeeValidate, Formkit. Internationalisation : Vue I18n.
Vue versus React
Les deux résolvent les mêmes problèmes différemment. React : plus populaire, plus d’opportunités, plus d’options de bibliothèques, mais plus d’options à choisir peut dérouter. Vue : courbe d’apprentissage plus douce, documentation excellente, conventions plus marquées qui guident. TypeScript fonctionne bien dans les deux.
Pour un choix professionnel : dépend du marché local. Pour apprendre les concepts : Vue est souvent plus doux.
Se former
Documentation officielle vuejs.org. Vue Mastery (cours premium). Vue School. Les vidéos YouTube de Vue Conference sont excellentes. Projets open source en Vue pour s’inspirer.
Conclusion : choix pragmatique
Vue est un excellent framework qui mérite considération au-delà de l’effet React. Pour certains projets et profils, il est tout simplement plus adapté. Pour une PME, si vous avez des développeurs qui apprécient Vue ou qui en ont une expérience, s’en servir est parfaitement pertinent. La qualité des applications Vue modernes rivalise avec n’importe quelle autre technologie front-end. Construisez un projet pilote : quelques jours suffisent pour se forger une opinion éclairée.