Quelle bibliothèque UI pour Vue et Nuxt choisir ?

Vous débutez avec Vue ou Nuxt, ou vous cherchez simplement à explorer de nouvelles bibliothèques pour enrichir votre framework préféré ? Alors, bienvenue dans cet article où je vous présente une sélection de bibliothèques d’UI conçues pour Vue 3 et Nuxt 3. Pour réaliser ce guide, je me suis appuyé sur l’excellent outil UI Lib Picker, qui recense les bibliothèques disponibles et vous permet d’explorer leurs composants et fonctionnalités en détail. J'ai également organisé les bibliothèques par ordre de préférence croissante, bien que cela reste subjectif.

Les bibliothèques non stylisées

Dans l'univers des bibliothèques UI, on distingue deux grandes catégories : celles qui sont déjà stylisées et celles qui ne le sont pas. Ici, on va se concentrer sur la deuxième catégorie. Ces bibliothèques offrent une flexibilité maximale pour personnaliser vos interfaces et éviter l'effet "déjà-vu". Cela dit, elles nécessitent plus de travail pour gérer les styles et peuvent introduire des bugs lors de l'intégration des composants.

L’un de leurs plus grands atouts est qu'elles incluent des fonctionnalités avancées souvent complexes à implémenter soi-même, comme des options d'accessibilité ou des comportements sophistiqués pour des composants interactifs.

Headless UI

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Unstyled, fully accessible UI components

Headless UI, c’est un peu le gosse de riche qui profite de la notoriété de son grand frère tout en ne faisant pas trop d’efforts. En l’occurrence, le grand frère en question, c’est Tailwind. Comme vous l’aurez deviné, Headless UI est une bibliothèque développée par le même créateur et utilisée notamment dans Tailwind UI, la collection de templates payants de Tailwind. La version 2.0 est disponible pour React, mais pas encore pour Vue, ce qui démontre une préférence claire pour React de la part de l'équipe. Malgré tout, Headless UI reste une option viable si vous cherchez les composants de bases à intégrer.

Ark UI

Home | Ark UI

A headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.

Ark UI

Ark UI est une bibliothèque non stylisée particulièrement complète. Elle se distingue par sa documentation claire et détaillée, incluant des représentations visuelles de l’anatomie des composants. En plus d’être disponible pour react, vue et solid, la bibliothèque possède un énorme éventail de composants, ce qui en fait une vraie pépite pour les gros projets nécessitant des fonctionnalités avancées comme la gestion des QR codes ou des pads de signature.

Reka UI

Reka

An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.

Reka UIZernonia, Khairul Haaziq, Mujahid Anuar, Max, Artem Melnyk, Eduard Predescu and Reka contributors

Voici ma librairie non stylisée préférée : Reka UI. Anciennement connue sous le nom de Radix UI, elle constitue la base de nombreux projets stylisés, tout comme son équivalent sous React avec Radix. Dans ce cas, il s’agit de son pendant pour Vue, soutenu par une communauté très active. Cet aspect est son principal atout : grâce aux grandes ambitions portées par son équipe (notamment le renommage de la librairie pour s’affranchir de Radix et offrir davantage de fonctionnalités), Reka UI attire un intérêt croissant. Par exemple, des librairies stylisées comme Nuxt UI sont en train d’adopter Reka UI pour leur version 3. Avec 128 contributeurs (contre 65 pour Ark UI) alors qu’il n’est destiné qu’a vue, Reka UI bénéficie d’une communauté très engagée et a atteint plus rapidement un nombre d’étoiles comparable sur GitHub, témoignant de la satisfaction de ses utilisateurs. De plus son nombre d’utilisations là aussi bien suppérieur à Ark UI avec pas moins de 77.3K contre 850 ce qui reste quand même bien inférieur aux 197K de Headless UI. Cependant, en raison de sa relative jeunesse, le projet propose moins de composants que son principal concurrent, même si cela pourrait venir à changer dans le futur.

Les bibliothèques stylisées

Passons maintenant aux bibliothèques stylisées, qui séduisent souvent par leur simplicité d’utilisation. Avec ces bibliothèques, tout est prêt à l'emploi : composants, styles, et parfois même des templates, même si ceux-ci sont généralement payants.

Vuetify — A Vue Component Framework

Vuetify is a no design skills required Open Source UI Component Framework for Vue. It provides you with all of the t…

Vuetify

Vuetify reste une bibliothèque incontournable pour les développeurs cherchant une interface fidèle aux principes de Material Design (V2) conçus par Google. Toutefois, elle commence à accuser son âge, notamment en n’adoptant pas les principes de Material You (V3). Malgré cela, son ancienneté lui confère un avantage : elle offre un écosystème riche et bien développé. On y trouve une vaste sélection d’addons pour Vue 2 ou Vue 3, ainsi qu’un système de thèmes personnalisables, disponibles en versions gratuites ou payantes. En complément, Vuetify propose des templates prêts à l’emploi et des UI Kits compatibles avec Figma, ce qui en fait un outil complet pour les projets basés sur Vue.

Element Plus

A Vue 3 UI Framework | Element Plus

A Vue 3 based component library for designers and developers

Element Plus Logo

Direction le Japon avec Element Plus, l’évolution d’Element UI adaptée à Vue 3. Pour ma part, je l’ai utilisée dans le cadre d’un projet reproduisant l’interface d’Anilist. Cependant, en dehors de ce type de cas spécifique, ce n’est pas forcément la librairie vers laquelle vous vous tournerez naturellement. Cela étant dit, en tant que suite d’une librairie historique, Element Plus bénéficie d’une large palette de composants et d’une documentation solide. Certains composants se démarquent particulièrement, comme le scroll infini, le calendrier mensuel façon Google Calendar ou encore les fonctionnalités de watermark, des éléments rares dans d’autres librairies présentées ici.

Shadcn-vue

Shadcn for Vue - shadcn/vue

Beautifully designed components built with Radix Vue and Tailwind CSS.

shadcn/vue

Comme mentionné précédemment avec Reka UI, voici Shadcn-vue, la librairie qui provient de la même organisation que Reka. Il s’agit d’un projet communautaire, non affilié officiellement à la librairie React du même nom, mais validé par son auteur pour conserver un nom qui y fait référence. Depuis quelques années, et surtout depuis la pandémie, Shadcn s’est imposé comme un design system très populaire, particulièrement auprès des start-up et des solutions SaaS.

Ce qui distingue Shadcn, au-delà de son interface élégante, c’est son approche modulaire : les composants peuvent être installés individuellement via des commandes sur le terminal. Cette flexibilité permet d’adapter les composants à ses besoins, d’ajouter des props ou même de créer des copies personnalisées pour des variantes distinctes. Cependant, cette indépendance a un revers : les mises à jour des composants peuvent être fastidieuses. Lors de mon utilisation, j’ai constaté des limitations dans les options de personnalisation, m’obligeant à apporter des modifications manuelles. Cela peut devenir problématique si une mise à jour modifie un composant que j'ai auparavant personnalisé, nécessitant alors une vigilance accrue lors de son réinstallation.

Cette librairie est donc particulièrement adaptée aux grandes entreprises souhaitant partir d’une base solide avec une interface existante, tout en gardant la possibilité d’ajouter des fonctionnalités spécifiques. Un des points faibles majeurs, cependant, réside dans la documentation. Elle ne fournit aucune information sur les API des composants, comme les props ou les emits disponibles. Il faut se référer à Reka-UI ou Radix-Vue (son ancien nom) pour combler ces lacunes ou analyser directement le code, ce qui augmente le risque de passer à côté de fonctionnalités importantes. Par ailleurs, l’intégration de Radix dépend de la manière dont la librairie est implémentée, notamment en ce qui concerne des mécanismes comme la propagation.

En conclusion, bien que Shadcn propose une interface de grande qualité, son approche basée sur des composants indépendants impose une gestion plus complexe dans les projets et nécessitera pour les gros projets des ajouts sur les composants proposés. Néanmoins, cette bibliothèque reste un classique pour son UI très épurée et a l'air d'aujourd'hui.

Nuxt UI

Nuxt UI: A UI Library for Modern Web Apps

It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.

Nuxt UI

Voici mon petit chouchou, développé par l’équipe derrière Nuxt. Cette bibliothèque est excellente. Tout d’abord, étant une librairie officielle, elle bénéficie d’un entretien régulier et de mises à jour anticipées grâce à sa proximité avec l’équipe qui gère le meta-framework. De plus, elle s’intègre parfaitement avec d’autres packages Nuxt, ce qui garantit une excellente complémentarité.

Nuxt UI permet de personnaliser ses composants de deux manières : soit en modifiant globalement les classes dans le fichier tailwind.js, soit en insérant un objet dans la prop ui du composant souhaité. La section "configuration" dans la doc de chaque composant permet de détailler toutes les personnalisations possibles avec les classes déjà présentes.

Enfin, Nuxt UI dispose d’une roadmap claire avec l’ambition de sortir la version 3, qui utilisera Reka UI et adoptera Tailwind V4. Des pré-releases en beta sont déjà disponibles, et la version finale sera publiée lorsque ces deux bibliothèques sortiront également de leur phase de beta. Cela montre bien l’ambition d’une librairie complète, tout en restant facile à utiliser et toujours à jours.

À cela s’ajoute la possibilité d’utiliser des templates préfabriqués via Nuxt UI Pro, qui offre des blocs de composants à l’image de Tailwind UI, Permettant ainsi de ne plus avoir à créer un composant de zéro. Toutefois, l’accès à ces templates est payant, avec un tarif de 250$ à vie. Cependant, vous pouvez librement (et gratuitement) les utiliser localement et même les copier si vous ne souhaitez pas payer.

Pour plus de retours sur Nuxt UI, je vous recommande la vidéo de Benjamin Code qui en parle lors de la création de son SaaS, ainsi que la vidéo de LearnVue qui l’a aussi récemment abordée.

PrimeVue : une bibliothèque stylisée ou non

PrimeVue | Vue UI Component Library

The ultimate collection of design-agnostic, flexible and accessible Vue UI Components.

block logo

En explorant UI Lib Picker, j'ai découvert une bibliothèque qui se distingue des autres. Non seulement elle propose nettement le plus grand nombre de composants parmis tous ceux proposé, mais elle offre aussi la particularité de pouvoir être stylisée ou non, selon le choix que l'en fait. C’est la première fois que je rencontre cette flexibilité, et je dois avouer que c’est un atout majeur. Voici donc PrimeVue, une bibliothèque bien établie qui a profité du temps pour développer un large catalogue de composants, tout en proposant des thèmes vraiment variés.

Concernant les composants, PrimeVue couvre une gamme impressionnante, allant des éditeurs de texte complets de type Google Docs, jusqu’aux terminaux. Il ne manque que les fonctionnalités de signature et QR code présentes dans Ark UI.

Pour la personnalisation des thèmes, PrimeVue se distingue une fois de plus par sa richesse. Vous pouvez ajuster chaque couleur primitive, mais aussi des paramètres globaux affectant plusieurs composants, comme le radius, la taille des icônes, le padding, l'ombre, etc. A cela on retrouve le même système que Nuxt UI qu'ils appèllent ici Pass Through en utilisant le prop pt De plus, vous avez la possibilité de choisir un thème complètement différent. Il existe plusieurs options : deux thèmes plutôt proches, où seul le padding change (Aura et Lora), un thème conçu pour des contrastes sans bordures arrondies (Nora), et un thème qui suit le Material You de Google (Material Design V3), ce qui fait de PrimeVue une option encore plus robuste que Vuetify.

Comme mentionné précédemment, PrimeVue offre la possibilité de choisir entre une version stylisée ou non stylisée. La version non stylisée propose là aussi deux modes : un mode hybride qui conserve les espacements, vous permettant d'ajouter simplement l'UI, et un mode pur qui supprime également le padding. Ce dernier mode vous oblige à repartir de zéro et à tout vérifier (notemment les formulaire où le padding est un enfer).

Enfin, à l'instar de Nuxt UI, PrimeVue propose un système de blocs préfabriqué pour encore moins de travail. Certains sont gratuits, tandis que d’autres sont accessibles via un abonnement annuel de 200$ sur le site primeblocks .