Ang Vue JS ay isang progresibong JavaScript framework na ginagamit upang bumuo ng mga single-page na application (mga SPA) at User Interface. At ito ay isa sa mga pinaka-tinatanggap na ginagamit na front-end frameworks out doon.

 

Ang isang kawili-wiling tampok ng Vue ay ang kakayahang hatiin ang isang webpage sa iba't ibang bahagi. At nagiging mas simple ang prosesong ito sa paggamit ng mga library ng bahagi ng UI.

 

Mayroong iba't ibang mga library ng bahagi ng UI na makakatulong sa iyong lumikha ng mga bahagi nang madali at mabilis. Kaya sa blog na ito, susuriin namin ang nangungunang 10 Vue UI Component Libraries para sa 2021.

 

1. PrimeVue

 

Ang PrimeVue ay isang simpleng gamitin, maraming nalalaman, at gumaganap na Vue UI Component Library na tumutulong sa iyong bumuo ng mga kahanga-hangang user interface.

 

Mayroon itong mahigit 80+ na bahagi ng UI na may ganap na suporta para sa Mga Alituntunin sa Pag-access sa Nilalaman ng Web (WCAG) at tumutugon na disenyo. At salamat sa isang kamakailang pag-update, ang aklatan ay mayroon na ngayong ganap na suporta para sa Vue 3. Nakakuha din ito ng marami pang mga bahagi.

 

Isa sa mga pinakamagandang bagay tungkol sa Primevue ay ang malawak na hanay ng mga bahagi nito. Ang mga ito ay mula sa mga talahanayan at paginator hanggang sa mahusay na ginawang graph-based na mga chart ng organisasyon na magagamit mo upang lumikha ng mga interactive na Vue app. Ito ay open-source at may 1k+ star sa Github at 6,983 lingguhang pag-download sa NPM.

 

2. Vuetify

 

Ang Vuetify ay isang Vue UI Library na may magagandang handcrafted na Mga Bahagi na gumagamit ng detalye ng Material Design. Nangangahulugan ito na ito ay binuo nang eksakto ayon sa mga pagtutukoy ng Material Design na ang bawat bahagi ay maingat na ginawa upang maging modular, tumutugon, at gumaganap.

 

Hinahayaan ka ng Vuetify na i-customize ang iyong mga application gamit ang natatangi at dynamic na mga layout at gawing perpekto ang mga istilo ng iyong mga bahagi gamit ang mga variable ng SASS.

 

Sinusuportahan din nito ang mga alituntunin sa accessibility, lahat ng modernong browser, at tugma sa Vue CLI-3. Madali itong isama at maraming magagamit muli na bahagi ng UI tulad ng mga carousel, navigation, at card. Ang Vuetify ay open source at may higit sa 29k star sa Github at 319,170 lingguhang pag-download sa NPM.

 

3. Chakra UI Vue

 

Ang Chakra UI ay isang simpleng modular at accessible na component library na nagbibigay sa iyo ng mga tool upang mabilis at madali ang pagbuo ng mga Vue application.

 

Ang lahat ng mga bahagi ay naa-access (mahigpit itong sumusunod sa mga pamantayan ng WAI-ARIA), themeable, at composable. Sinusuportahan nito ang mga istilong tumutugon sa labas ng kahon at tugma sa dark-mode.

 

Naglalaman din ang Chakra UI ng isang set ng mga bahagi ng layout tulad ng CBox at CStack na nagpapadali sa istilo ng iyong mga bahagi sa pamamagitan ng pagpasa ng mga props. Binibigyang-daan ka rin nitong mag-auto-import ng mga bahagi ng Chakra UI Vue gamit ang solusyon sa plugin ng webpack. Ito ay open-source at may 900+ star sa Github at 331lingguhang pag-download sa NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Sa BootstrapVue maaari kang bumuo ng tumutugon, pang-mobile, at ARIA na naa-access na mga proyekto sa web gamit ang Vue.js at ang sikat na front-end na CSS library — Bootstrap. Ang dokumentasyon ay madaling maunawaan at madali din itong i-set up. Ginagawa nitong mas mabilis ang mga pagpapatupad sa front-end.

 

Nag-aalok ito ng 85+ component, higit sa 45 available na plugin, ilang direktiba, at 1000+ na icon. Nagbibigay din ito ng mga functional na bahagi na iniayon para sa mga layout at tumutugon na disenyo. madali mo ring maisasama ang BootstrapVue sa iyong mga proyekto sa Nuxt.js gamit ang module ng Nuxt.js.

 

Ginagamit din ito sa parehong paraan kung paano ginagamit ang bootstrap CSS framework. Open-sourced ito sa Github na may humigit-kumulang 12.9k na bituin at 1.7k na tinidor.

 

5. Vuesax

 

Ang Vuesax ay isang bagong balangkas ng bahagi ng UI na nilikha gamit ang Vuejs para madaling gumawa ng mga proyekto at may kakaiba at kaaya-ayang istilo, ang vuesax ay nilikha mula sa simula at idinisenyo para sa lahat ng uri ng mga developer mula sa frontend lover hanggang sa backend na gustong madaling gumawa ng kanilang visual approach sa ang end-user. Ang mga disenyo ay natatangi para sa bawat bahagi at hindi naka-angkla sa anumang visual na uso o mga panuntunan sa disenyo, na ginagawang natatangi rin ang mga proyektong binuo gamit ito.

 

nag-aalok ito ng mga tumutugon na pahina at magagamit muli at nako-customize na mga bahagi ng UI. Madali ring magsimula sa alinman sa paggamit ng npm o CDN. Kasalukuyang hindi nito sinusuportahan ang Vue CLI 3 sa kamakailang bersyon nito. Open-sourced ito sa Github na may humigit-kumulang 4.9k na bituin at 6700 lingguhang pag-download NPM.

 

6. Ant Design Vue

 

Ant Design vue batay sa detalye ng Ant Design, ang Ant design vue ay isang vue UI library na naglalaman ng set ng mga de-kalidad na bahagi at demo para sa pagbuo ng mayaman, interactive na interface ng user.

 

Nagbibigay ang Ant-design-vue ng maraming bahagi ng UI upang pagyamanin ang iyong mga web application gaya ng Skeleton, drawer, statistics at marami pang iba.

 

Sa kamakailang paglabas ng ant design vue na bersyon 2, na-update ito upang maging mas mabilis at mas madaling pagsamahin, mas maliit na laki ng bundle, at sinusuportahan din ang Vue 3, New Composition API na dokumento. Sinusuportahan din nito ang mga modernong web browser, server-side Rendering, at electron. Mayroon itong mahigit 13k na bituin sa Github at sa 39,693 lingguhang pag-download ng NPM.

 

7. Quasar

 

Ang Quasar ay isa sa mga pinakamahusay na framework ng Vue UI na nagbibigay-daan sa mga developer na gumamit ng isang source code base para sa lahat ng platform sa pamamagitan ng Quasar CLI na may pinakamahuhusay na kagawian sa labas ng kahon. Hinahayaan nito ang mga developer na tumuon sa nilalaman ng kanilang App kaysa sa lahat ng iba pang bagay sa pag-plating ng boiler (build system, layout) sa paligid nito. nakatutok ito sa pagsunod sa mga alituntunin sa Material 2.0 at mayroon ding napakasuportang komunidad.

 

Isa sa mga espesyal na bagay tungkol sa Quasar ay ang kakayahang magsulat ng code nang isang beses at sabay-sabay na i-deploy ito bilang isang website, isang Mobile App gamit ang isang codebase lang. Mayroon ding bagong bersyon na kasalukuyang nasa beta na susuporta sa mga feature ng vue 3. Mayroon itong humigit-kumulang 17.8k na bituin sa Github.

 

8. Buefy

 

Ang Buefy ay isang magaan na UI component library para sa Vue JS batay sa Bulma (isang CSS framework). Pinagsasama ng Buefy ang Bulma sa Vue, na tumutulong sa iyong bumuo ng mga magagandang application gamit ang minimal na code. ito ay ang javascript layer para sa iyong Bulma interface.

 

Maaari itong ma-import nang buo o iisang bahagi sa isang ordinaryong webpage. Ang pagsasama nito sa iyong proyekto ay medyo madali, maaaring gawin gamit ang npm o CDN.

 

Nagbibigay ang Buefy ng mga nakahandang bahagi ng UI, layout, at mga icon. Ang mga bahagi ay maaaring gumamit ng SASS sa iyong tema. Sinusuportahan din nito ang mga modernong browser.

 

9. Materyal na Vue

 

Ang Vue Material ay isang malawakang ginagamit, magaan na framework na nagpapatupad ng mga detalye ng Material Design. Isa ito sa pinakamahusay na pagsasama sa pagitan ng Vue.js at mga spec ng Material Design! Madali mo itong mai-configure upang umangkop sa lahat ng iyong pangangailangan sa pamamagitan ng isang madaling API.

 

Tugma ito sa tumutugon na disenyo at suporta para sa lahat ng modernong Web Browser. Ang library ay nahahati sa Mga Tema, Mga Bahagi, at Mga Elemento ng UI. Ang mga tema ay nagbibigay ng tiyak na gabay sa kung paano i-theme ang iyong application (o magsulat ng sarili mong mga tema) at ang Mga Bahagi at UI Element ay binubuo ng mga layout, navigation, typography, mga icon, at 30 higit pang mga bahagi. Mayroon itong humigit-kumulang 9.2k na bituin at 1.1k na tinidor sa Github at 21k + lingguhang pag-download ng NPM.

 

10. KeenUI

 

Ang KeenUI ay isang magaan na vue.js UI library na may simpleng API, na inspirasyon ng Material Design ng Google. Ang Keen UI ay hindi isang CSS framework. Samakatuwid, hindi ito kasama ang mga istilo para sa isang grid system, typography, atbp. Sa halip, ang focus ay sa mga interactive na bahagi na nangangailangan ng Javascript.

 

Mayroon itong humigit-kumulang 30 na magagamit muli na mga bahagi. Nako-customize ang mga bahagi sa pamamagitan ng pag-override sa mga istilo gamit ang mga variable ng SASS. maaari mong isama ito sa iyong proyekto gamit ang CDN o npm. Ito ay open-sourced at may humigit-kumulang 4k na bituin sa Github.

 

Konklusyon

 

Ang mga library ng bahagi ng UI ay tiyak na ginagawang mas madali ang pagbuo ng isang proyekto. Ang pagpili ng tama ay depende sa mga tampok ng proyekto na gusto mong gawin. Bago sumabak sa isang bagong proyekto, ipinapayong suriin ng isa ang library ng bahagi ng UI na pinakaangkop para sa layunin.