Vue.js : framework accessible pour démarrer

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.

Un projet Vue 3 créé via npm create vue@latest (CLI officiel) suit une arborescence claire. Le dossier src contient main.ts (point d’entrée), App.vue (composant racine), components (composants réutilisables), views (pages), router (routes Vue Router), stores (état Pinia), assets (CSS/images). Le fichier vite.config.ts configure Vite, le bundler par défaut depuis Vue 3.5. Cette organisation tient sur 50 lignes pour un petit projet et reste lisible jusqu’à 200+ composants pour les apps moyennes. Pour une équipe à Plateau qui démarre, suivre cette convention évite les divergences entre développeurs.

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.

Vue 3 émet et écoute les événements via la directive @click ou v-on. Pour communiquer d’un composant enfant vers son parent, utilisez defineEmits avec TypeScript pour typer les événements. La syntaxe const emit = defineEmits<{ change: [value: string] }>() documente le contrat. Le parent écoute avec @change= »handler ». Évitez les bus d’événements globaux dépréciés depuis Vue 3 — utilisez plutôt un store Pinia pour la communication transverse. Les événements natifs (click, input, focus) bénéficient des modificateurs .prevent, .stop, .once qui simplifient les patterns courants.

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.

Vue Router 4 (router officiel pour Vue 3) gère la navigation client-side. Définissez les routes dans router/index.ts avec le composant cible et un meta optionnel. Le router-view dans App.vue rend le composant correspondant à l’URL. Pour les pages protégées (dashboard utilisateur), utilisez beforeEach pour vérifier l’authentification et rediriger vers /login si besoin. Le lazy loading via component: () => import('@/views/Dashboard.vue') divise le bundle initial et accélère le LCP sur mobile 4G. Ce pattern réduit typiquement le bundle de 30-50 % sur une app moyenne.

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 slots permettent à un composant parent d’injecter du contenu dans un composant enfant. Le slot par défaut s’utilise avec <slot/> dans l’enfant et n’importe quel contenu entre les balises du parent. Les slots nommés (avec name="header") couvrent les patterns layout (header, content, footer dans un même composant Card). Les scoped slots transmettent des données du composant enfant vers le contenu du parent via <slot :item="data"/>, utiles pour les listes personnalisables. Cette flexibilité est ce qui rend Vue particulièrement adapté aux design systems.

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.

Vue propose le composant <Transition> qui ajoute automatiquement les classes CSS v-enter-from, v-enter-active, v-enter-to (et leurs équivalents leave) lors du montage/démontage d’un élément. Combiné à @keyframes ou aux propriétés CSS transition, vous obtenez des effets sophistiqués sans bibliothèque externe. Pour des transitions de liste, <TransitionGroup> gère les déplacements et le réordonnancement avec FLIP technique. Respectez prefers-reduced-motion pour l’accessibilité — Vue respecte automatiquement ce paramètre si vos classes CSS le prévoient.

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.

Nuxt 3 (sortie 2022, version stable) est le framework SSR officieux pour Vue. Il combine SSR pour le SEO, hydration côté client pour l’interactivité, file-based routing automatique et auto-imports des composables. Pour un projet à Cotonou qui veut combiner un blog public (SEO critique) et une app dashboard (interactivité riche), Nuxt couvre les deux cas dans le même codebase. Déployez sur Vercel, Cloudflare Pages ou un serveur Node classique. Le mode SSG génère un site statique pour les contenus rarement modifiés (CDN-friendly, performance maximale).

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.

L’écosystème de test Vue couvre trois niveaux. Vitest (basé sur Vite) pour les tests unitaires de fonctions et composables, syntaxe similaire à Jest avec performance 5-10x supérieure. Vue Test Utils pour les tests de composants (mount, props, emits, slots). Cypress ou Playwright pour les tests end-to-end qui simulent un vrai navigateur. Cible raisonnable de couverture : 70-80 % sur les composants critiques (forms, paiements), 40-60 % sur le reste. Les tests s’intègrent dans GitHub Actions ou GitLab CI pour bloquer le merge en cas de régression.

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.

Vue s’intègre facilement dans un projet legacy (jQuery, ASP.NET, PHP) sans réécrire l’application. Importez Vue via CDN et instanciez une app uniquement sur la div qui héberge votre composant. Cette approche progressive a permis à des sites WordPress à Yopougon ou Sicap Liberté d’ajouter des widgets interactifs (calculateur, filtre dynamique) sans refonte. Pour les projets qui finissent par migrer entièrement, garder Vue isolé sur quelques pages en parallèle réduit le risque et permet une transition par paliers de 6-12 mois.

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.

L’écosystème Vue maintient quelques piliers qui couvrent 90 % des besoins. Pinia pour le state management (remplace officiellement Vuex depuis 2022). VueUse pour 200+ composables prêts à l’emploi (useFetch, useDebounce, useLocalStorage). PrimeVue ou Vuetify pour les bibliothèques de composants UI complets. Element Plus pour le marché chinois mais aussi solide en français. Vee-Validate pour la validation de formulaires complexes. Cette stack mature évite de réinventer la roue sur les besoins standard.

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.

La meilleure ressource gratuite reste la documentation officielle vuejs.org qui propose un tutoriel interactif progressif en 1-2 heures. Ensuite, le cours payant de Vue Mastery (créé en partie par l’équipe Vue) couvre l’avancé en profondeur (50-150 USD selon plan). Pour les francophones, la chaîne YouTube Grafikart et les tutoriels d’OpenClassrooms restent accessibles gratuitement. Pour pratiquer, le projet Vue Conventions (open-source) compile les patterns recommandés. Comptez 4-8 semaines de pratique régulière (5-10 h/semaine) pour atteindre un niveau opérationnel sur des projets clients à Dakar ou Bamako.

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.