Meilleures bibliothèques de composants Vue 3

Vue 3 est désormais la version par défaut et recommandée de Vue. Elle comporte un certain nombre d'améliorations importantes qui la rendent plus intéressante pour les programmeurs. Quelles sont donc les meilleures bibliothèques de composants d'interface utilisateur compatibles avec Vue 3 disponibles aujourd'hui ? Dans cet article, je veux vous présenter les cinq meilleures bibliothèques de composants d'interface utilisateur open source pour Vue 3.

Une nouvelle Vue

Le 7 février 2022, Vue 3 est enfin arrivé avec une solide documentation en anglais. L'un des principaux changements par rapport à Vue 2 est le support complet de TypeScript et l'introduction de l'API de composition. En outre, certaines parties de l'outillage autour de Vue 3 ont changé. Vite est désormais la chaîne d'outils recommandée pour les projets Vue. Et Pinia est la bibliothèque de gestion d'état officiellement approuvée par le fondateur de Vue, Evan You.

Une nouvelle version de Vue entraîne la nécessité de mettre à jour les bibliothèques de composants de l'interface utilisateur. Les bibliothèques de composants sont importantes pour la plupart des projets Vue, car elles accélèrent le développement d'une application Vue et garantissent la cohérence de l'interface utilisateur et une convivialité cohérente.

À la date de rédaction de cet article, les principales bibliothèques de composants suivantes fonctionnent déjà avec Vue 3 :

Naive UI

_{Capture d'écran du composant Naive UI}

Naive UI est une nouvelle bibliothèque de composants pour Vue 3. Sur GitHub, elle compte 8,5k étoiles (avril 2022) et est publiée sous une licence MIT. La bibliothèque comporte plus de 80 composants, elle devrait donc répondre aux besoins de la plupart des projets.

Le principal développeur de Naive UI parle le chinois mandarin, et la bibliothèque dispose donc d'une bonne documentation en mandarin.

Lorsque vous avez besoin d'adapter les composants à votre thème de couleur, vous pouvez simplement modifier dans un objet global JavaScript. Il n'est pas nécessaire de modifier les variables Sass ou CSS.

Comme d'autres bibliothèques de composants, le site Web de Naive UI publie également des exemples de chaque composant, des extraits de code et une documentation API. Le support de l'accessibilité (a11y) est actuellement un travail en cours.

Le design de Naive UI ressemble beaucoup à celui d'une autre bibliothèque de composants, Ant Design Vue, qui apparaît plus loin dans cette liste.

En raison de son grand nombre de composants et de son design épuré, cette bibliothèque peut néanmoins constituer un bon choix.

Site Web : https://www.naiveui.com

Quasar

_{Capture d'écran du composant Quasar}

Quasar a l'objectif ambitieux de fournir une bibliothèque de composants multiplateforme, non seulement pour les applications Web, mais aussi pour les applications mobiles, de bureau et les extensions de navigateur.

Elle compte 21 000 étoiles (avril 2022) sur GitHub et est placée sous licence MIT.

Le fondateur du projet est Razvan Stoenescu de Roumanie, mais Quasar a par ailleurs une grande communauté de contributeurs. Quasar est un framework populaire et il a même une liste Quasar Awesome.

La conception des composants de Quasar est conforme à la spécification Material Design de Google. Lorsque vous souhaitez personnaliser les composants, Quasar s'appuie sur les variables Sass/Scss. Pour une meilleure expérience des développeurs, Quasar dispose aussi d'un outil CLI. Le support de l'accessibilité (a11y) n'est pas disponible actuellement.

Si vous avez besoin d'une bibliothèque de composants Material Design pour votre projet Vue 3 qui a une grande communauté, alors vous devriez évaluer Quasar.

Site web : https://quasar.dev

Vuestic UI

_{Capture d'écran du composant Vuestic}.

Vuestic UI est l'effort de Epicmax, une société de développement Vue à Tbilissi, en Géorgie. Vuestic UI a 1,2k étoiles (avril 2022) sur GitHub et est publié sous une licence MIT. La bibliothèque comprend 52 composants et les composants ont également été testés avec la navigation au clavier.

Vous pouvez personnaliser les composants avec des variables CSS. Le site Web documente l'API (props, événements, slots et méthodes) pour chaque composant en anglais. Vous pouvez également voir des exemples de code pour le fonctionnement de chaque composant sur le site Web.

Dans l'ensemble, une offre solide pour les applications Web Vue 3.

Site web : https://vuestic.dev

Ant Design Vue

_{Capture d'écran du composant Ant Design Vue}

Ant Design est un système de conception créé par les grandes entreprises chinoises Alibaba et Ant Financial.

Il supportait à l'origine React, mais a maintenant été porté sur Vue 3 dans un effort communautaire sous le nom de "Ant Design Vue".

Sur GitHub, Ant Design Vue a 16.4k étoiles (avril 2022) et est publié sous une licence MIT.

Il dispose d'une grande sélection de composants et le site web documente son utilisation avec des extraits de code et une documentation API en anglais. L'accessibilité (a11y) n'est actuellement pas bien supportée.

Il y a une autre bibliothèque de composants dans cette liste, Naive UI, qui a un aspect similaire à Ant Design Vue.

Ainsi, pour les projets qui ont besoin d'une bibliothèque de composants cohérente et supportée par de grandes entreprises, Ant Design Vue est un bon choix.

Site web : https://www.antdv.com

PrimeVue

_{Capture d'écran du composant PrimeVue}

PrimeVue est un projet de la société turque PrimeTek. PrimeTek a une longue histoire établie en tant que fournisseur de bibliothèques de composants, principalement sur le marché des entreprises Java.

Avec PrimeVue, la société publie une bibliothèque forte de 90 composants à utiliser dans les projets Vue 3. Sur GitHub, elle compte 2,3k étoiles (avril 2022) et est sous licence MIT.

Les styles peuvent être personnalisés en écrasant les styles dans le CSS, ce qui n'est pas le moyen le plus simple.

Mais il offre un bon support pour les besoins des applications web d'entreprise. Par exemple, des composants comme une table de données avec chargement paresseux différencient cette offre des autres bibliothèques de composants de cette liste.

Ainsi, pour les applications Web dans l'espace de l'entreprise, cette bibliothèque peut être un très bon choix.

Site web : https://primefaces.org/primevue

Conclusion

Il existe actuellement un certain nombre de bonnes bibliothèques de composants d'interface utilisateur open source supportant Vue 3.

Si vos projets ont besoin d'un support solide pour l'accessibilité (a11y), je vous recommande le projet établi Bootstrap. Actuellement, il n'existe pas de bibliothèque wrapper spécifique pour Vue 3, mais Bootstrap peut être intégré tel quel dans les projets Vue 3, moyennant quelques efforts mineurs.

J'espère donc que cet article vous aura permis d'avoir un bref aperçu de l'offre actuelle de bibliothèques de composants pour Vue 3.

Références

• Vue : https://vuejs.org

• NaiveUI : Site web : https://www.naiveui.com

• Vuestic : https://vuestic.dev

• Quasar : https://quasar.dev

• Ant Design Vue : https://www.antdv.com

• PrimeVue : https://primefaces.org/primevue

• Bootstrap : https://getbootstrap.com