Vue JS ass e progressive JavaScript Kader dee benotzt gëtt fir eenzel Säit Uwendungen (SPAs) a User Interfaces z'entwéckelen. An et ass ee vun de meescht benotzte Front-End Kaderen dobaussen.
Eng interessant Feature vu Vue ass seng Fäegkeet fir eng Websäit a verschidde Komponenten opzedeelen. An dëse Prozess gëtt méi einfach mat der Benotzung vun UI Komponentbibliothéiken.
Et gi verschidde UI Komponentbibliothéiken déi Iech hëllefe kënnen Komponenten einfach a séier ze kreéieren. Also an dësem Blog wäerte mir déi Top 10 Vue UI Komponentbibliothéike fir 2021 iwwerpréiwen.
1. PrimeVue
PrimeVue ass eng einfach ze benotzen, versatile a performant Vue UI Komponentbibliothéik déi Iech hëlleft genial User Interfaces ze bauen.
Et huet iwwer 80+ UI Komponenten mat voller Ënnerstëtzung fir Web Content Accessibility Guidelines (WCAG) a reaktiounsfäeger Design. An dank engem rezenten Update, huet d'Bibliothéik elo voll Ënnerstëtzung fir Vue 3. Et huet och eng Rëtsch méi Komponente.
Ee vun de beschte Saachen iwwer Primevue ass seng breet Palette vu Komponenten. Si reegelen vun Dëscher a Paginatoren bis gutt ausgeschafft Grafik-baséiert Organisatiounsdiagrammer déi Dir benotze kënnt fir interaktiv Vue Apps ze kreéieren. Et ass Open-Source an huet 1k+ Stären op Github an 6,983 wëchentlech Downloads op NPM.
2. Vuetify
Vuetify ass eng Vue UI Bibliothéik mat wonnerschéin handgemaachte Komponenten déi d'Material Design Spezifikatioun benotzt. Dëst bedeit datt et genau no de Material Design Spezifikatioune entwéckelt gouf mat all Komponent virsiichteg gemaach fir modulär, reaktiounsfäeger a performant ze sinn.
Vuetify léisst Iech Är Uwendungen mat eenzegaartegen an dynamesche Layouten personaliséieren an d'Stiler vun Äre Komponenten perfektionéieren mat SASS Variablen.
Et ënnerstëtzt och Accessibilitéit Richtlinnen, all modern Browser, an ass kompatibel mat Vue CLI-3. Et ass einfach ze integréieren an huet vill reusable UI Komponente wéi Karussell, Navigatioun, a Kaarten. Vuetify ass Open Source a mat iwwer 29k Stären op Github an 319,170 wëchentlech Downloads op NPM.
3. Chakra UI Vue
Chakra UI ass eng einfach modulär an zougänglech Komponentbibliothéik déi Iech Tools gëtt fir Vue Uwendungen séier an einfach ze bauen.
All d'Komponente sinn zougänglech (et follegt strikt WAI-ARIA Standarden), thematesch a komponéierbar. Et ënnerstëtzt reaktiounsfäeger Stiler aus der Këscht an ass Dark-Modus kompatibel.
Chakra UI enthält och eng Rei vu Layoutkomponenten wéi CBox an CStack, déi et einfach maachen Är Komponenten ze styléieren andeems Dir Requisiten passéiert. Et erlaabt Iech och Chakra UI Vue Komponenten automatesch z'importéieren mat enger Webpack Plugin Léisung. Et ass Open-Source an huet 900+ Stären op Github an 331 Wochenzeitung Downloads op NPM.
4. Bootstrap Vue
BootstrapVue, Mat BootstrapVue kënnt Dir reaktiounsfäeger, mobil-éischt, an ARIA zougänglech Projeten um Web bauen mat Vue.js an déi populär Front-End CSS Bibliothéik - Bootstrap. D'Dokumentatioun ass einfach ze verstoen an et ass och einfach ze konfiguréieren. Et mécht Front-End Implementatiounen méi séier gemaach.
Et bitt 85+ Komponenten, iwwer 45 verfügbare Plugins, verschidde Direktiven, an 1000+ Symboler. Et bitt och funktionell Komponenten, déi fir Layouten a reaktiounsfäeger Design ugepasst sinn. Dir kënnt och einfach BootstrapVue an Ären Nuxt.js Projeten integréieren mam Nuxt.js Modul.
Et gëtt och op déiselwecht Manéier benotzt wéi de Bootstrap CSS Kader benotzt gëtt. Et ass Open-Source op Github mat ongeféier 12.9k Stären an 1.7k Gabel.
5. Vuesax
Vuesax ass en neien UI Komponent Kader erstallt mat Vuejs fir Projeten einfach a mat engem eenzegaartegen an agreabele Stil ze maachen, vuesax ass vun Null erstallt an entworf fir all Zorte vun Entwéckler vum Frontend-Liebhaber bis zum Backend, deen hir visuell Approche einfach wëll kreéieren den Endverbraucher. D'Designs sinn eenzegaarteg fir all Komponent a sinn net un visuell Trends oder Designregelen verankert, sou datt Projete mat deem eenzegaarteg gebaut ginn.
et bitt reaktiounsfäeger Säiten a reusable an personaliséierbar UI Komponenten. Et ass och einfach unzefänken mat entweder npm oder CDN ze benotzen. Et ënnerstëtzt de Moment net Vue CLI 3 a senger rezenter Versioun. Et ass Open-Source op Github mat ongeféier 4.9k Stären a 6700 wëchentlech Downloads NPM.
6. Ant Design Vue
Ant Design Vue baséiert op der Ant Design Spezifizéierung, Ant Design Vue ass eng Vue UI Bibliothéik déi eng Rei vu qualitativ héichwäerteg Komponenten an Demos enthält fir räich, interaktiv User Interfaces ze bauen.
Ant-Design-Vue bitt vill UI Komponenten fir Är Webapplikatiounen wéi Skelett, Tirang, Statistiken a sou vill méi ze beräicheren.
Mat der rezenter Verëffentlechung vun Ant Design Vue Versioun 2, et gouf aktualiséiert fir méi séier a méi einfach z'integréieren, méi kleng Bündelgréisst, an ënnerstëtzt och Vue 3, New Composition API Dokument. Et ënnerstëtzt och modern Webbrowser, Server-Säit Rendering, an Elektron. Et huet iwwer 13k Stären op Github an op 39,693 wëchentlech Downloads NPM.
7. Quasar
Quasar ass ee vun de beschten Vue UI Kaderen déi Entwéckler erlaben eng Quellcode Basis fir all Plattformen duerch Quasar CLI mat de beschten Praktiken aus der Këscht ze benotzen. Et léisst d'Entwéckler sech op den Inhalt vun hirer App konzentréieren anstatt all aner Kesselplattingstuff (Build System, Layout) ronderëm. et ass fokusséiert op d'Material 2.0 Richtlinnen ze verfollegen an huet och eng ganz ënnerstëtzend Gemeinschaft.
Ee vun de spezielle Saachen iwwer Quasar ass d'Fäegkeet fir Code eemol ze schreiwen a gläichzäiteg als Websäit z'installéieren, eng Mobile App déi just eng Codebase benotzt. Et gëtt och eng nei Versioun am Moment an der Beta déi vue 3 Features ënnerstëtzt. Et huet ongeféier 17.8k Stären op Github.
8. Buefy
Buefy ass eng liicht UI Komponentbibliothéik fir Vue JS baséiert op Bulma (e CSS Kader). Buefy kombinéiert Bulma mat Vue, hëlleft Iech gutt ausgesinn Uwendungen ze bauen mat minimale Code. et ass d'Javascript Layer fir Är Bulma Interface.
Et kann entweder komplett oder eenzel Komponenten op enger gewéinlecher Websäit importéiert ginn. Et an Äre Projet z'integréieren ass ganz einfach, kann entweder mat npm oder CDN gemaach ginn.
Buefy bitt fäerdeg UI Komponenten, Layout an Ikonen. D'Komponente kënnen SASS op Äert Thema benotzen. Et ënnerstëtzt och modern Browser.
9. Vue Material
Vue Material ass e wäit benotzten, liichte Kader deen d'Material Design Spezifikatioune implementéiert. Et ass eng vun de beschten Integratioun tëscht Vue.js a Material Design Spezifikatioune! Dir kënnt et einfach konfiguréieren fir all Är Bedierfnesser ze passen duerch eng einfach API.
Et ass kompatibel mat reaktiounsfäeger Design an Ënnerstëtzung fir all modern Web Browser. D'Bibliothéik ass opgedeelt an Themen, Komponenten an UI Elementer. D'Themen ginn en definitive Guide fir wéi Dir Är Applikatioun thematiséiert (oder Är eege Themen schreift) an d'Komponenten an UI Elementer besteet aus Layouten, Navigatioun, Typographie, Ikonen, an 30 méi Komponenten. Et huet ongeféier 9.2k Stären an 1.1k Gabel op Github an 21k + wöchentlech Downloads NPM.
10. KeenUI
KeenUI ass eng liicht vue.js UI Bibliothéik mat enger einfacher API, inspiréiert vum Google Material Design. Keen UI ass keen CSS Kader. Dofir enthält et keng Stiler fir e Gittersystem, Typografie, etc. Amplaz läit de Fokus op interaktiv Komponenten déi Javascript erfuerderen.
Et huet ongeféier 30 reusable Komponenten. D'Komponente sinn personaliséierbar andeems d'Stiler iwwerschreiden mat SASS Variablen. Dir kënnt et an Äre Projet integréieren entweder mat CDN oder npm. Et ass Open-Source an huet ongeféier 4k Stären op Github.
Konklusioun
UI Komponentbibliothéiken maachen definitiv e Projet vill méi einfach auszebauen. D'Recht wielen hänkt vun de Funktiounen vum Projet of, un deem Dir wëllt schaffen. Ier Dir an en neie Projet daucht, ass et ubruecht fir een d'UI Komponentbibliothéik ze iwwerpréiwen déi am Beschten fir den Zweck passt.