O le Vue JS ose fa'asologa o le JavaScript e fa'aogaina e atia'e ai itulau ta'itasi (SPAs) ma Fa'aoga Fa'aoga. Ma o se tasi lea o faʻaoga pito i luma e sili ona faʻaaogaina i fafo.

 

O se tasi o mea manaia o le Vue o lona mafai lea ona talepe i lalo se itulau web i vaega eseese. Ma o lenei faiga e sili atu ona faigofie i le faʻaogaina o faletusi vaega UI.

 

O lo'o i ai faletusi vaega UI eseese e mafai ona fesoasoani ia te oe e fatuina vaega faigofie ma vave. I totonu o lenei blog, o le a matou iloiloina le pito i luga 10 Vue UI Component Libraries mo 2021.

 

1. PrimeVue

 

O le PrimeVue o se Vue UI Component Library e faigofie ona fa'aoga, fa'apitoa, ma fa'atino e fesoasoani ia te oe e fausia ai feso'ota'iga mata'utia o tagata fa'aoga.

 

E sili atu i le 80+ UI vaega faʻatasi ma le lagolago atoatoa mo Web Content Accessibility Guidelines (WCAG) ma le mamanu tali. Ma faʻafetai i se faʻafouga talu ai nei, o loʻo i ai nei le lagolago atoatoa a le faletusi mo Vue 3. Na maua ai foi le tele o isi vaega.

 

O se tasi o mea sili e uiga i Primevue o lona tele o vaega. E fa'asolo mai laulau ma itulau fa'akomepiuta i siata fa'atulagaina fa'avae-kalafa lelei e mafai ona e fa'aogaina e fai ai polokalame Vue fegalegaleai. E tatala-puna ma e 1k+ fetu i Github ma 6,983 vaiaso download i luga ole NPM.

 

2. Vuetify

 

O le Vuetify o le Vue UI Library ma mea matagofie na gaosia i lima e fa'aogaina ai le fa'amatalaga o Mea Fa'atonu. O lona uiga ua fausia tonu e tusa ai ma le Material Design specifications ma vaega uma ua mamanuina ma le totoa ina ia faʻaogaina, tali, ma faʻatino.

 

Vuetify e fa'atagaina oe e fa'avasega au tusi talosaga i fa'asologa tulaga ese ma le malosi ma fa'aatoatoaina sitaili o au vaega e fa'aaoga ai suiga SASS.

 

E lagolagoina fo'i ta'iala e mafai ona maua, su'esu'ega fa'aonaponei uma, ma e fetaui ma Vue CLI-3. E faigofie ona tu'ufa'atasia ma e tele vaega UI e mafai ona fa'aaogaina e pei o carousels, fa'ata'ita'iga, ma kata. O le Vuetify o se punaoa tatala ma e sili atu i le 29k fetu i luga o Github ma 319,170 vaiaso download i luga ole NPM.

 

3. Chakra UI Vue

 

O le Chakra UI o se faletusi faʻapipiʻi faigofie ma mafai ona maua e tuʻuina atu ia te oe meafaigaluega e fausia vave ma faigofie ai Vue talosaga.

 

O vaega uma e mafai ona maua (e matua mulimulitaʻi lava i tulaga WAI-ARIA), autu, ma faʻapipiʻi. E lagolagoina sitaili tali mai i fafo o le pusa ma e fetaui ma le pogisa.

 

O le Chakra UI o loʻo iai foʻi se seti o mea faʻapipiʻi e pei o CBox ma CStack e faigofie ai ona faʻapipiʻi au vaega e ala i le pasia o mea faʻaoga. E fa'atagaina ai fo'i oe e fa'aulufaleina mai le Chakra UI Vue vaega e fa'aaoga ai se fofo fa'apipi'i webpack. E tatala-puna ma e 900+ fetu ile Github ma 331weekly downloads ile NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Faatasi ai ma BootstrapVue e mafai ona e fausia ni galuega tali, feaveai-muamua, ma ARIA avanoa i luga o le upega tafaʻilagi e faʻaaoga ai le Vue.js ma le faletusi CSS lauiloa pito i luma - Bootstrap. O faʻamaumauga e faigofie ona malamalama ma e faigofie foi ona faʻatulagaina. E fa'atopetope ai fa'atinoga pito i luma.

 

E ofoina atu le 85+ vaega, sili atu i le 45 plugins avanoa, tele faʻatonuga, ma 1000+ ata. O lo'o tu'uina atu ai fo'i vaega fa'atino e fa'atulagaina mo fa'ata'otoga ma fa'ata'ita'iga fa'afoliga. e faigofie fo'i ona e tu'ufa'atasia BootstrapVue i au galuega Nuxt.js e fa'aaoga ai le Nuxt.js module.

 

E fa'aogaina fo'i i le auala lava e tasi e pei ona fa'aogaina ai le fa'avae CSS bootstrap. O loʻo faʻaogaina i luga ole Github ma e tusa ma le 12.9k fetu ma le 1.7k tui.

 

5. Vuesax

 

O le Vuesax o se faʻavae fou o le UI na faia ma Vuejs e faʻafaigofie ai galuega faatino ma faʻatasi ai ma se sitaili tulaga ese ma le manaia, vuesax e faia mai le maasiasi ma mamanuina mo ituaiga uma o atinaʻe mai le pito i luma e fiafia i le pito i tua o loʻo manaʻo e faʻafaigofie a latou auala vaaia i le tagata fa'aaoga mulimuli. O mamanu e tulaga ese mo vaega taʻitasi ma e le taulaʻi i soʻo se faʻaaliga vaʻaia poʻo tulafono faʻatulagaina, e faʻaogaina ai galuega faʻapitoa foi.

 

e ofoina atu itulau tali ma reusable ma customizable vaega UI. E faigofie foi ona amata ile faʻaaogaina ole npm poʻo le CDN. E le'o lagolagoina Vue CLI 3 i lana lomiga lata mai nei. O loʻo faʻaogaina i luga ole Github ma e tusa ma le 4.9k fetu ma le 6700 faʻalevaiaso download NPM.

 

6. Loi Design Vue

 

Ant Design vue e fa'avae i luga o le Ant Design fa'amatalaga, Ant design vue o se vue UI faletusi o lo'o i ai se seti o vaega sili ona lelei ma fa'ata'ita'iga mo le fausiaina o feso'ota'iga fa'aoga mauoa, fegalegaleai.

 

Ant-design-vue e maua ai le tele o vaega UI e faʻatamaoaigaina ai au 'upega tafaʻilagi e pei ole Skeleton, drawer, statistics ma sili atu.

 

Faatasi ai ma le tatalaina lata mai o le ant design vue version 2, ua toe faʻafouina ina ia vave ma faigofie ona tuʻufaʻatasia, laʻititi laʻititi lapoʻa, ma lagolagoina foi le Vue 3, New Composition API pepa. E lagolagoina fo'i su'esu'ega i luga ole laiga fa'aonaponei, Fa'aliliuga ile itu-aumau, ma le eletise. E sili atu ile 13k fetu ile Github ma luga ole 39,693 vaiaso download NPM.

 

7. Kuasar

 

Quasar o se tasi o Vue UI auivi sili ona lelei e mafai ai e le au atinaʻe ona faʻaogaina se tasi faʻavae faʻavae mo faʻavae uma e ala i Quasar CLI faʻatasi ai ma faiga sili ona lelei mai le pusa. E mafai ai e le au atiaʻe ona taulaʻi atu i mea o loʻo i ai a latou App nai lo isi mea uma e faʻapipiʻi ai mea faʻapipiʻi (fausia faiga, faʻatulagaina) faʻataʻamilo. o loʻo taulaʻi i le mulimulitaʻi i le Material 2.0 taʻiala ma e iai foʻi se faʻalapotopotoga lagolago tele.

 

O se tasi o mea faʻapitoa e uiga ia Quasar o le mafai lea ona tusi faʻailoga tasi ma faʻapipiʻi i le taimi lava e tasi o se upega tafaʻilagi, o se Mobile App e faʻaaoga ai naʻo le tasi codebase. O loʻo iai foʻi se faʻamatalaga fou i le taimi nei i le beta lea e lagolagoina vue 3 foliga. E tusa ma le 17.8k fetu ile Github.

 

8. Buefy

 

O le Buefy o se faletusi vaega UI mama mo Vue JS faʻavae ile Bulma (se faʻavae CSS). O Buefy e tu'ufa'atasia le Bulma ma Vue, e fesoasoani ia te oe e fau ni tusi ta'ilelei e fa'aaoga ai le la'ititi la'ititi. o le javascript layer mo lau fa'aoga Bulma.

 

E mafai ona fa'aulufaleina atoatoa pe tasi vaega i luga o se itulau masani. O le tuʻufaʻatasia i lau poloketi e faigofie tele, e mafai ona faʻaaoga le npm poʻo le CDN.

 

E saunia e Buefy vaega UI ua saunia, faʻatulagaina, ma ata. O vaega e mafai ona faʻaogaina le SASS i lau autu. E lagolagoina fo'i su'esu'ega fa'aonaponei.

 

9. Vue Mea

 

Vue Material ose fa'aoga lautele, mama mama e fa'atino ai fa'amatalaga Fa'atonu Mea. O se tasi o tu'ufa'atasiga sili ona lelei i le va o Vue.js ma Material Design specs! E faigofie ona e fa'atulagaina e fetaui ma ou mana'oga uma e ala i se API faigofie.

 

E fetaui ma le mamanu tali mai ma le lagolago mo Web Browsers faʻaonapo nei. Ua vaevaeina le faletusi i Themes, Components, ma UI Elements. O autu o loʻo tuʻuina atu ai se taʻiala faʻapitoa i le auala e faʻaulu ai lau talosaga (pe tusi au lava autu) ma le Vaega ma le UI Elements e aofia ai faʻasologa, faʻatautaia, typography, icons, ma isi vaega e 30. E tusa ma le 9.2k fetu ma le 1.1k forks ile Github ma le 21k + vaiaso download NPM.

 

10. KeenUI

 

KeenUI ose vue.js UI faletusi mama ma se API faigofie, fa'aosofia e Google's Material Design. Keen UI e le o se fa'avae CSS. O le mea lea, e le o aofia ai sitaili mo se faiga fa'asologa, typography, ma isi mea.

 

E tusa ma le 30 vaega e mafai ona fa'aaogaina. O vaega e mafai ona faʻavasegaina e ala i le faʻaogaina o sitaili e faʻaaoga ai fesuiaiga SASS. e mafai ona e tuʻufaʻatasia i lau poloketi pe faʻaaoga le CDN poʻo le npm. E tatala fa'apogai ma e tusa ma le 4k fetu ile Github.

 

iʻuga

 

O faletusi vaega a le UI e mautinoa lava e faigofie tele le fausiaina o se poloketi. O le filifilia o le sa'o e fa'alagolago i foliga o le poloketi e te mana'o e galue ai. A'o le'i maulu i se galuega fou, e fautuaina e se tasi e toe iloilo le faletusi vaega UI lea e sili ona fetaui mo le fa'amoemoe.