Vue JS est un framework JavaScript progressif utilisé pour développer des applications monopage (SPA) et des interfaces utilisateur. Et c’est l’un des frameworks frontaux les plus utilisés.
Une fonctionnalité intéressante de Vue est sa capacité à diviser une page Web en différents composants. Et ce processus devient plus simple grâce à l’utilisation de bibliothèques de composants d’interface utilisateur.
Il existe diverses bibliothèques de composants d'interface utilisateur qui peuvent vous aider à créer des composants facilement et rapidement. Donc, dans ce blog, nous allons passer en revue les 10 meilleures bibliothèques de composants Vue UI pour 2021.
1. PrimeVue
PrimeVue est une bibliothèque de composants Vue UI simple à utiliser, polyvalente et performante qui vous aide à créer de superbes interfaces utilisateur.
Il contient plus de 80 composants d'interface utilisateur avec une prise en charge complète des directives pour l'accessibilité du contenu Web (WCAG) et du design réactif. Et grâce à une mise à jour récente, la bibliothèque prend désormais entièrement en charge Vue 3. Elle contient également de nombreux composants supplémentaires.
L'un des meilleurs atouts de Primevue est sa large gamme de composants. Ils vont des tableaux et paginateurs aux organigrammes bien conçus basés sur des graphiques que vous pouvez utiliser pour créer des applications Vue interactives. Il est open source et compte plus de 1 6,983 étoiles sur Github et XNUMX XNUMX téléchargements hebdomadaires sur NPM.
2. Vuetifier
Vuetify est une bibliothèque Vue UI avec des composants magnifiquement conçus qui utilisent la spécification Material Design. Cela signifie qu'il a été développé exactement selon les spécifications de Material Design, chaque composant étant méticuleusement conçu pour être modulaire, réactif et performant.
Vuetify vous permet de personnaliser vos applications avec des mises en page uniques et dynamiques et de perfectionner les styles de vos composants à l'aide de variables SASS.
Il prend également en charge les directives d'accessibilité, tous les navigateurs modernes et est compatible avec Vue CLI-3. Il est facile à intégrer et contient de nombreux composants d'interface utilisateur réutilisables tels que des carrousels, des navigations et des cartes. Vuetify est open source et compte plus de 29 319,170 étoiles sur Github et XNUMX XNUMX téléchargements hebdomadaires sur NPM.
3. Vue de l'interface utilisateur des chakras
Chakra UI est une bibliothèque de composants simple, modulaire et accessible qui vous donne les outils nécessaires pour créer des applications Vue rapidement et facilement.
Tous les composants sont accessibles (ils suivent strictement les normes WAI-ARIA), thématiques et composables. Il prend en charge les styles réactifs prêts à l’emploi et est compatible avec le mode sombre.
Chakra UI contient également un ensemble de composants de mise en page tels que CBox et CStack qui facilitent le style de vos composants en passant des accessoires. Il vous permet également d'importer automatiquement les composants Chakra UI Vue à l'aide d'une solution de plugin webpack. Il est open source et compte plus de 900 étoiles sur Github et 331 téléchargements hebdomadaires sur NPM.
4. Vue d'amorçage
BootstrapVue, avec BootstrapVue, vous pouvez créer des projets réactifs, mobiles et accessibles ARIA sur le Web à l'aide de Vue.js et de la populaire bibliothèque CSS frontale — Bootstrap. La documentation est facile à comprendre et elle est également facile à configurer. Cela accélère les implémentations frontales.
Il propose plus de 85 composants, plus de 45 plugins disponibles, plusieurs directives et plus de 1000 icônes. Il fournit également des composants fonctionnels adaptés aux mises en page et au design réactif. vous pouvez également facilement intégrer BootstrapVue dans vos projets Nuxt.js à l'aide du module Nuxt.js.
Il est également utilisé de la même manière que le framework CSS bootstrap. Il est open source sur Github avec environ 12.9 1.7 étoiles et XNUMX XNUMX forks.
5. Vuesax
Vuesax est un nouveau framework de composants d'interface utilisateur créé avec Vuejs pour réaliser des projets facilement et avec un style unique et agréable, vuesax est créé à partir de zéro et conçu pour tous les types de développeurs, de l'amateur de frontend au backend qui souhaitent créer facilement leur approche visuelle de l'utilisateur final. Les conceptions sont uniques pour chaque composant et ne sont ancrées dans aucune tendance visuelle ni règle de conception, ce qui rend les projets construits avec ce composant également uniques.
il propose des pages réactives et des composants d'interface utilisateur réutilisables et personnalisables. Il est également facile de démarrer avec npm ou CDN. Il ne prend actuellement pas en charge Vue CLI 3 dans sa version récente. Il est open source sur Github avec environ 4.9 6700 étoiles et XNUMX XNUMX téléchargements hebdomadaires NPM.
6. Vue de conception de fourmis
Ant Design vue basée sur la spécification Ant Design, Ant design vue est une bibliothèque d'interface utilisateur vue qui contient un ensemble de composants et de démos de haute qualité pour créer des interfaces utilisateur riches et interactives.
Ant-design-vue fournit de nombreux composants d'interface utilisateur pour enrichir vos applications Web telles que Skeleton, Drawer, Statistiques et bien plus encore.
Avec la récente version d'ant design vue version 2, il a été mis à jour pour être plus rapide et plus facile à intégrer, avec une taille de bundle plus petite, et prend également en charge Vue 3, le nouveau document API de composition. Il prend également en charge les navigateurs Web modernes, le rendu côté serveur et Electron. Il compte plus de 13 39,693 étoiles sur Github et sur XNUMX XNUMX téléchargements hebdomadaires NPM.
7. Quasars
Quasar est l'un des meilleurs frameworks Vue UI qui permet aux développeurs d'utiliser une base de code source pour toutes les plates-formes via Quasar CLI avec les meilleures pratiques prêtes à l'emploi. Il permet aux développeurs de se concentrer sur le contenu de leur application plutôt que sur tous les autres éléments de placage de chaudière (système de construction, mise en page) qui l'entourent. il se concentre sur le respect des directives Material 2.0 et dispose également d'une communauté très solidaire.
L'une des particularités de Quasar est la possibilité d'écrire du code une fois et de le déployer simultanément en tant que site Web, une application mobile utilisant une seule base de code. Il existe également une nouvelle version actuellement en version bêta qui prendrait en charge les fonctionnalités de vue 3. Il compte environ 17.8 XNUMX étoiles sur Github.
8. Buéfique
Buefy est une bibliothèque légère de composants d'interface utilisateur pour Vue JS basée sur Bulma (un framework CSS). Buefy combine Bulma avec Vue, vous aidant à créer de belles applications en utilisant un minimum de code. c'est la couche javascript de votre interface Bulma.
Il peut être importé entièrement ou en composants uniques sur une page Web ordinaire. L'intégrer dans votre projet est assez simple, peut être effectué en utilisant npm ou CDN.
Buefy fournit des composants d'interface utilisateur, une mise en page et des icônes prêts à l'emploi. Les composants peuvent utiliser SASS pour votre thème. Il prend également en charge les navigateurs modernes.
9. Matériel de vue
Vue Material est un framework léger et largement utilisé qui implémente les spécifications Material Design. C'est l'une des meilleures intégrations entre les spécifications Vue.js et Material Design ! Vous pouvez facilement le configurer pour répondre à tous vos besoins grâce à une API simple.
Il est compatible avec une conception réactive et prend en charge tous les navigateurs Web modernes. La bibliothèque est divisée en thèmes, composants et éléments d'interface utilisateur. Les thèmes donnent un guide définitif sur la façon de thématiser votre application (ou d'écrire vos propres thèmes) et les composants et éléments d'interface utilisateur se composent de mises en page, de navigation, de typographie, d'icônes et de 30 autres composants. Il compte environ 9.2 1.1 étoiles et 21 XNUMX forks sur Github et plus de XNUMX XNUMX téléchargements hebdomadaires NPM.
10. KeenUI
KeenUI est une bibliothèque d'interface utilisateur vue.js légère avec une API simple, inspirée du Material Design de Google. Keen UI n'est pas un framework CSS. Par conséquent, il n'inclut pas les styles pour un système de grille, une typographie, etc. Au lieu de cela, l'accent est mis sur les composants interactifs qui nécessitent Javascript.
Il contient environ 30 composants réutilisables. Les composants sont personnalisables en remplaçant les styles à l'aide de variables SASS. vous pouvez l'intégrer dans votre projet en utilisant CDN ou npm. Il est open source et compte environ 4 XNUMX étoiles sur Github.
Conclusion
Les bibliothèques de composants d'interface utilisateur facilitent définitivement la création d'un projet. Choisir le bon dépend des caractéristiques du projet sur lequel vous souhaitez travailler. Avant de se lancer dans un nouveau projet, il est conseillé de consulter la bibliothèque de composants d'interface utilisateur la mieux adaptée à cet objectif.