Vue.js

Présentation

Vue.js est un framework JavaScript open source destiné à la création d’interfaces Web.

Créé par Evan You, il se distingue par son approche progressive : Vue peut servir à enrichir une page existante avec quelques composants ou constituer la base d’une application monopage complète.

Le framework repose sur un système de composants, des templates déclaratifs et une couche de réactivité qui met automatiquement à jour l’interface lorsque les données utilisées changent.

Vue propose deux styles principaux d’API : Options API et Composition API. La Composition API associée à la syntaxe <script setup> constitue aujourd’hui l’approche courante pour les nouveaux projets et facilite notamment l’organisation de composants complexes et l’utilisation de TypeScript.

L’écosystème officiel reste volontairement modulaire. Vue Router prend en charge la navigation, Pinia la gestion d’état et Vite constitue l’outil recommandé pour créer et compiler les nouveaux projets.

Au 3 octobre 2026, Vue 3.5.43 est la dernière version stable. Vue 3.6 est encore en phase de release candidate.

Fonctionnalités

Composants et templates

Une application Vue est construite à partir de composants réutilisables.

Chaque composant peut recevoir des données, gérer son propre état, émettre des événements et intégrer d’autres composants.

Les templates utilisent une syntaxe proche du HTML enrichie par des expressions JavaScript et des directives.

Des directives comme v-if, v-for, v-bind ou v-on permettent respectivement de contrôler l’affichage, parcourir des collections, lier des attributs ou réagir aux événements.

Cette approche déclarative évite de manipuler directement le DOM pour la majorité des interactions courantes.

Réactivité

Vue possède un système de réactivité intégré.

ref() permet de créer une valeur réactive tandis que reactive() transforme un objet en état réactif.

Les valeurs calculées peuvent être déclarées avec computed(), et watch() permet de déclencher une logique lorsqu’une donnée particulière évolue.

Lorsqu’une valeur utilisée par un composant change, Vue identifie les parties de l’interface concernées et met à jour leur rendu.

Ce système peut également être utilisé indépendamment des composants dans certaines logiques applicatives.

Composition API

La Composition API permet d’organiser la logique d’un composant autour de fonctions et de fonctionnalités plutôt qu’autour de catégories d’options.

Elle utilise notamment ref, reactive, computed, watch et les hooks de cycle de vie.

La logique réutilisable peut être extraite dans des fonctions appelées composables, qui peuvent ensuite être partagées entre plusieurs composants.

Cette approche est particulièrement adaptée aux composants complexes et améliore généralement l’inférence de types avec TypeScript.

Options API

Vue continue également à proposer l’Options API.

Elle organise un composant en sections comme data, methods, computed, watch et les hooks de cycle de vie.

Cette syntaxe reste entièrement supportée et peut être plus accessible pour certains projets ou développeurs débutants.

Options API et Composition API reposent sur le même système sous-jacent et peuvent coexister dans un même écosystème.

Single-File Components

Les Single-File Components — SFC regroupent généralement le template, la logique JavaScript ou TypeScript et les styles d’un composant dans un fichier .vue.

Un composant peut ainsi contenir des blocs <template>, <script> et <style> clairement séparés.

La syntaxe <script setup> simplifie la Composition API en rendant directement accessibles dans le template les variables, fonctions et imports déclarés dans le script.

Les SFC nécessitent une étape de compilation et sont particulièrement adaptés aux projets utilisant Vite.

Props, événements et v-model

Les props permettent à un composant parent de transmettre des données à un composant enfant.

Les événements permettent au composant enfant de communiquer une action ou un changement vers son parent.

Vue prend également en charge v-model pour créer des liaisons bidirectionnelles adaptées notamment aux champs de formulaire et aux composants personnalisés.

Cette circulation explicite des données aide à structurer les relations entre les composants.

TypeScript

Vue dispose d’un support approfondi de TypeScript.

Les props, événements, refs, composables et autres éléments peuvent bénéficier du typage statique et de l’inférence.

L’extension officielle Vue pour les éditeurs fournit également l’analyse des fichiers .vue, y compris les expressions présentes dans les templates.

vue-tsc permet d’effectuer ces vérifications de types depuis la ligne de commande.

TypeScript reste néanmoins optionnel : Vue peut être utilisé avec JavaScript classique.

Vue Router

Vue Router est le routeur officiel de Vue.

Il permet d’associer différentes URL aux composants d’une application, de gérer paramètres, routes imbriquées, redirections et navigation programmatique.

Il prend en charge aussi bien Composition API qu’Options API.

Pour une SPA de taille réelle, Vue recommande généralement Vue Router plutôt qu’une implémentation manuelle de la navigation.

Pinia

Pinia est la solution de gestion d’état recommandée pour les applications Vue.

Un store peut regrouper état, valeurs dérivées et actions accessibles depuis plusieurs composants.

Pinia offre également intégration avec Vue DevTools, TypeScript, Hot Module Replacement et rendu serveur.

Vuex, l’ancien gestionnaire d’état officiel de l’écosystème Vue, reste utilisable mais se trouve désormais en mode maintenance ; Pinia est recommandé pour les nouveaux projets.

Vite et create-vue

Les nouveaux projets Vue sont généralement créés avec create-vue, l’outil officiel de scaffolding.

Il génère un projet basé sur Vite et permet d’activer selon les besoins TypeScript, Vue Router, Pinia, tests ou autres fonctions.

Vite fournit serveur de développement rapide, Hot Module Replacement et compilation de production.

L’ancien Vue CLI basé sur webpack reste disponible pour les projets existants mais se trouve en mode maintenance. Vue recommande Vite pour les nouveaux projets.

Rendu serveur et hydratation

Vue prend en charge le Server-Side Rendering — SSR.

Un serveur peut générer le HTML initial à partir des composants Vue, puis le navigateur hydrate cette page pour la rendre interactive.

Cette approche peut améliorer le temps d’accès au contenu et convenir aux pages publiques nécessitant une bonne indexation.

Vue peut également être utilisé pour de la Static Site Generation — SSG, lorsque les pages peuvent être générées à l’avance.

Pour les projets SSR importants, la documentation recommande généralement d’utiliser un framework Vue disposant déjà de cette infrastructure, notamment Nuxt.

Hydratation différée

Vue 3.5 a ajouté des stratégies de lazy hydration pour les composants asynchrones utilisés en SSR.

Un composant peut ainsi attendre avant d’être hydraté côté navigateur selon différents critères, par exemple lorsqu’il devient visible ou lorsque le navigateur est disponible.

Cette approche peut réduire le JavaScript exécuté immédiatement au chargement d’une page.

Elle s’adresse principalement aux architectures utilisant rendu serveur ou génération hybride.

Transition, Teleport et Suspense

Vue fournit plusieurs composants intégrés pour les besoins fréquents d’interface.

Transition et TransitionGroup facilitent l’animation de l’apparition, disparition ou déplacement des éléments.

Teleport permet de rendre une partie d’un composant ailleurs dans le DOM, ce qui est particulièrement utile pour les modales et overlays.

Suspense peut coordonner certains composants asynchrones et afficher un contenu temporaire pendant leur chargement.

Ces fonctions évitent d’ajouter immédiatement une bibliothèque externe pour plusieurs besoins courants.

Type de projet progressif

Vue peut être utilisé sans système de build en chargeant directement le framework depuis un CDN.

Cette possibilité convient à l’ajout progressif de composants interactifs sur une application existante.

Pour les applications plus importantes, l’utilisation de SFC, Vite et des outils de build est généralement préférable.

Cette capacité à passer d’une intégration légère à une application complète explique le qualificatif de framework progressif utilisé par Vue.

Tests et DevTools

L’écosystème Vue fournit plusieurs outils pour le développement et les tests.

La documentation recommande Vitest pour les tests unitaires dans les projets basés sur Vite.

Cypress peut être utilisé pour les tests end-to-end et les tests de composants.

Vue DevTools permet d’inspecter l’arbre des composants, leur état, Pinia et différentes informations de performance directement depuis les outils de développement.

Cas d’usage

Construire une SPA

Vue Router, Pinia et les composants Vue permettent de construire une application monopage complète.

L’interface peut évoluer en fonction de la navigation et de l’état sans recharger intégralement chaque page.

Ajouter de l’interactivité à un site existant

Vue peut être introduit progressivement dans une page déjà produite par un backend classique.

Un formulaire, configurateur ou tableau interactif peut ainsi utiliser Vue sans réécrire immédiatement l’ensemble du site.

Développer une application avec TypeScript

Les SFC et la Composition API fonctionnent étroitement avec TypeScript.

Cette combinaison convient aux applications où composants et logique métier nécessitent davantage de contrôle sur les types.

Construire un site avec SSR

Vue peut produire le HTML initial sur le serveur puis hydrater l’interface côté navigateur.

Pour les projets importants, Nuxt peut prendre en charge routing, récupération des données, SSR et différentes stratégies de rendu autour de Vue.

Créer une bibliothèque de composants

Les Single-File Components permettent de construire un design system composé de boutons, champs, cartes, modales et autres éléments réutilisables.

Les mêmes composants peuvent ensuite être intégrés dans plusieurs applications Vue.

Conclusion

Vue.js combine simplicité d’adoption et architecture capable de monter progressivement en complexité.

Son système de composants et de réactivité permet de construire des interfaces avec relativement peu de code, tandis que Composition API et <script setup> offrent une organisation adaptée aux projets plus importants.

Vue Router, Pinia et Vite complètent le framework avec des outils officiels cohérents sans imposer dès le départ une architecture trop lourde.

Vue peut aussi bien enrichir une page existante que servir de base à une SPA ou à une application rendue côté serveur avec un framework comme Nuxt.

Cette flexibilité implique cependant de choisir plusieurs éléments d’architecture lorsque le projet grandit, là où un framework plus intégré comme Angular fournit davantage de décisions par défaut.

Pour créer des interfaces Web modernes avec une syntaxe accessible, une réactivité intégrée et un écosystème modulable, Vue.js constitue une solution particulièrement équilibrée.

Points d’attention

• Vue 3.5.43 est la version stable actuelle au 3 octobre 2026, publiée le 17 septembre 2026.

• Vue 3.6 est encore en préversion. La branche a atteint la phase release candidate mais ne doit pas encore être considérée comme la référence stable de production.

• Vue.js est gratuit et open source sous licence MIT, y compris pour un usage commercial.

• Vue 3 est la branche moderne de référence. Vue 2 a atteint sa fin de vie officielle le 31 décembre 2023.

• Composition API n’a pas remplacé Options API. Les deux styles sont officiellement supportés, même si Composition API avec <script setup> est très présente dans les nouveaux projets.

• Vue ne fournit pas directement toutes les fonctions d’une application complète. Vue Router, Pinia ou un framework comme Nuxt complètent généralement le cœur du framework.

• Vue Router est recommandé pour les SPA ayant un véritable besoin de navigation. Une implémentation manuelle n’est adaptée qu’aux cas très simples.

• Pinia est recommandé pour les nouveaux projets nécessitant une gestion d’état globale. Vuex se trouve désormais en mode maintenance.

• Vue CLI est en mode maintenance. Les nouveaux projets doivent généralement utiliser create-vue et Vite.

• Le SSR ajoute de la complexité à l’architecture. Code spécifique au navigateur, état partagé entre requêtes et dépendances tierces doivent être gérés avec précaution.

• Le contenu HTML fourni par un utilisateur ne doit pas être injecté sans assainissement. L’utilisation imprudente de HTML ou templates non fiables peut introduire des vulnérabilités XSS.

• Les bibliothèques tierces ont leurs propres licences et cycles de maintenance. Leur compatibilité avec les versions récentes de Vue doit être vérifiée lors des mises à niveau.