Vue JS એ એક પ્રગતિશીલ JavaScript ફ્રેમવર્ક છે જેનો ઉપયોગ સિંગલ-પેજ એપ્લિકેશન્સ (SPAs) અને વપરાશકર્તા ઇન્ટરફેસ વિકસાવવા માટે થાય છે. અને તે ત્યાં સૌથી વધુ ઉપયોગમાં લેવાતા ફ્રન્ટ-એન્ડ ફ્રેમવર્કમાંનું એક છે.

 

Vue ની એક રસપ્રદ સુવિધા એ વેબપેજને વિવિધ ઘટકોમાં વિભાજીત કરવાની ક્ષમતા છે. અને આ પ્રક્રિયા UI ઘટક પુસ્તકાલયોના ઉપયોગથી સરળ બને છે.

 

ત્યાં વિવિધ UI ઘટક લાઇબ્રેરીઓ છે જે તમને સરળતાથી અને ઝડપથી ઘટકો બનાવવામાં મદદ કરી શકે છે. તેથી આ બ્લોગમાં, અમે 10 માટે ટોચની 2021 Vue UI કમ્પોનન્ટ લાઇબ્રેરીઓની સમીક્ષા કરવા જઈ રહ્યા છીએ.

 

1. પ્રાઇમવ્યુ

 

પ્રાઇમવ્યુ એ વાપરવા માટે સરળ, બહુમુખી અને પ્રભાવશાળી Vue UI કમ્પોનન્ટ લાઇબ્રેરી છે જે તમને અદ્ભુત વપરાશકર્તા ઇન્ટરફેસ બનાવવામાં મદદ કરે છે.

 

તેમાં વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ (WCAG) અને રિસ્પોન્સિવ ડિઝાઇન માટે સંપૂર્ણ સમર્થન સાથે 80+ UI ઘટકો છે. અને તાજેતરના અપડેટ માટે આભાર, લાઇબ્રેરીમાં હવે Vue 3 માટે સંપૂર્ણ સમર્થન છે. તેને ઘણા બધા ઘટકો પણ મળ્યા છે.

 

પ્રાઇમવ્યુ વિશેની શ્રેષ્ઠ વસ્તુઓમાંની એક તેના ઘટકોની વિશાળ શ્રેણી છે. તેઓ કોષ્ટકો અને પૃષ્ઠ ચિહ્નોથી લઈને સારી રીતે રચાયેલ ગ્રાફ-આધારિત સંસ્થા ચાર્ટ સુધીની શ્રેણી ધરાવે છે જેનો ઉપયોગ તમે ઇન્ટરેક્ટિવ Vue એપ્લિકેશન્સ બનાવવા માટે કરી શકો છો. તે ઓપન-સોર્સ છે અને Github પર 1k+ સ્ટાર્સ અને NPM પર 6,983 સાપ્તાહિક ડાઉનલોડ્સ ધરાવે છે.

 

2. Vuetify

 

Vuetify એ સુંદર હાથથી બનાવેલા ઘટકો સાથેની Vue UI લાઇબ્રેરી છે જે મટિરિયલ ડિઝાઇન સ્પષ્ટીકરણનો ઉપયોગ કરે છે. આનો અર્થ એ થાય છે કે તે મટીરીયલ ડીઝાઈનના સ્પષ્ટીકરણો અનુસાર બરાબર વિકસાવવામાં આવ્યું છે અને દરેક ઘટકને મોડ્યુલર, પ્રતિભાવશીલ અને પરફોર્મન્સ બનાવવા માટે કાળજીપૂર્વક તૈયાર કરવામાં આવ્યું છે.

 

Vuetify તમને અનન્ય અને ગતિશીલ લેઆઉટ સાથે તમારી એપ્લિકેશનોને કસ્ટમાઇઝ કરવા દે છે અને SASS વેરિયેબલ્સનો ઉપયોગ કરીને તમારા ઘટકોની શૈલીઓને સંપૂર્ણ બનાવી શકે છે.

 

તે ઍક્સેસિબિલિટી માર્ગદર્શિકા, તમામ આધુનિક બ્રાઉઝર્સને પણ સપોર્ટ કરે છે અને Vue CLI-3 સાથે સુસંગત છે. તેને એકીકૃત કરવું સરળ છે અને તેમાં ઘણા બધા પુનઃઉપયોગ કરી શકાય તેવા UI ઘટકો છે જેમ કે કેરોયુસેલ્સ, નેવિગેશન અને કાર્ડ્સ. Vuetify એ ઓપન સોર્સ છે અને Github પર 29k કરતાં વધુ સ્ટાર્સ અને NPM પર 319,170 સાપ્તાહિક ડાઉનલોડ્સ સાથે.

 

3. ચક્ર UI Vue

 

ચક્ર UI એ એક સરળ મોડ્યુલર અને સુલભ ઘટક લાઇબ્રેરી છે જે તમને ઝડપથી અને સરળતાથી Vue એપ્લિકેશન્સ બનાવવા માટે સાધનો આપે છે.

 

બધા ઘટકો સુલભ છે (તે WAI-ARIA ધોરણોને સખત રીતે અનુસરે છે), થીમેબલ અને કંપોઝેબલ છે. તે બોક્સની બહાર પ્રતિભાવશીલ શૈલીઓને સપોર્ટ કરે છે અને ડાર્ક-મોડ સુસંગત છે.

 

ચક્ર UI માં CBox અને CStack જેવા લેઆઉટ ઘટકોનો સમૂહ પણ છે જે પ્રોપ્સ પસાર કરીને તમારા ઘટકોને સ્ટાઇલ કરવાનું સરળ બનાવે છે. તે તમને વેબપેક પ્લગઇન સોલ્યુશનનો ઉપયોગ કરીને ચક્ર UI Vue ઘટકોને સ્વતઃ આયાત કરવાની પણ મંજૂરી આપે છે. તે ઓપન-સોર્સ છે અને Github પર 900+ સ્ટાર્સ અને NPM પર 331 સાપ્તાહિક ડાઉનલોડ્સ ધરાવે છે.

 

4. બુટસ્ટ્રેપ Vue

 

BootstrapVue, BootstrapVue સાથે તમે Vue.js અને લોકપ્રિય ફ્રન્ટ-એન્ડ CSS લાઇબ્રેરી — Bootstrap નો ઉપયોગ કરીને વેબ પર રિસ્પોન્સિવ, મોબાઇલ-ફર્સ્ટ અને ARIA ઍક્સેસિબલ પ્રોજેક્ટ્સ બનાવી શકો છો. દસ્તાવેજીકરણ સમજવા માટે સરળ છે અને તે સેટ કરવા માટે પણ સરળ છે. તે ફ્રન્ટ-એન્ડ અમલીકરણોને ઝડપી બનાવે છે.

 

તે 85+ ઘટકો, 45 થી વધુ ઉપલબ્ધ પ્લગઈન્સ, ઘણા નિર્દેશો અને 1000+ ચિહ્નો ઓફર કરે છે. તે લેઆઉટ અને રિસ્પોન્સિવ ડિઝાઇન માટે તૈયાર કરેલ કાર્યાત્મક ઘટકો પણ પ્રદાન કરે છે. તમે Nuxt.js મોડ્યુલનો ઉપયોગ કરીને તમારા Nuxt.js પ્રોજેક્ટ્સમાં BootstrapVue ને સરળતાથી એકીકૃત કરી શકો છો.

 

બુટસ્ટ્રેપ CSS ફ્રેમવર્કનો ઉપયોગ કરવામાં આવે છે તે જ રીતે તેનો ઉપયોગ પણ થાય છે. તે લગભગ 12.9k સ્ટાર્સ અને 1.7k ફોર્ક્સ સાથે ગીથબ પર ઓપન-સોર્સ છે.

 

5. વ્યુસેક્સ

 

Vuesax એ એક નવું UI કમ્પોનન્ટ ફ્રેમવર્ક છે જે Vuejs સાથે પ્રોજેક્ટને સરળતાથી અને એક અનન્ય અને સુખદ શૈલી સાથે બનાવવા માટે બનાવવામાં આવ્યું છે, vuesax શરૂઆતથી બનાવવામાં આવ્યું છે અને ફ્રન્ટ એન્ડ લવર્સથી લઈને બેકએન્ડ સુધીના તમામ પ્રકારના વિકાસકર્તાઓ માટે ડિઝાઇન કરવામાં આવ્યું છે જેઓ તેમના વિઝ્યુઅલ અભિગમને સરળતાથી બનાવવા માંગે છે. અંતિમ વપરાશકર્તા. ડિઝાઇન દરેક ઘટક માટે અનન્ય છે અને તે કોઈપણ વિઝ્યુઅલ વલણો અથવા ડિઝાઇન નિયમોને અનુરૂપ નથી, જે તેની સાથે બનેલા પ્રોજેક્ટ્સને પણ અનન્ય બનાવે છે.

 

તે પ્રતિભાવશીલ પૃષ્ઠો અને ફરીથી વાપરી શકાય તેવા અને કસ્ટમાઇઝ કરી શકાય તેવા UI ઘટકો પ્રદાન કરે છે. npm અથવા CDN નો ઉપયોગ કરીને પ્રારંભ કરવાનું પણ સરળ છે. તે હાલમાં તેના તાજેતરના સંસ્કરણમાં Vue CLI 3 ને સપોર્ટ કરતું નથી. તે લગભગ 4.9k સ્ટાર્સ અને 6700 સાપ્તાહિક ડાઉનલોડ્સ NPM સાથે ગીથબ પર ઓપન-સોર્સ છે.

 

6. કીડી ડિઝાઇન Vue

 

કીડી ડિઝાઇન સ્પષ્ટીકરણ પર આધારિત એન્ટ ડિઝાઇન વ્યુ, કીડી ડિઝાઇન વ્યુ એ એક વ્યુ UI લાઇબ્રેરી છે જેમાં સમૃદ્ધ, ઇન્ટરેક્ટિવ વપરાશકર્તા ઇન્ટરફેસ બનાવવા માટે ઉચ્ચ-ગુણવત્તાવાળા ઘટકો અને ડેમોનો સમૂહ છે.

 

Ant-design-vue તમારી વેબ એપ્લિકેશનને સમૃદ્ધ બનાવવા માટે પુષ્કળ UI ઘટકો પ્રદાન કરે છે જેમ કે સ્કેલેટન, ડ્રોઅર, આંકડા અને ઘણું બધું.

 

એન્ટ ડિઝાઈન વ્યુ વર્ઝન 2 ના તાજેતરના પ્રકાશન સાથે, તેને ઝડપી અને સરળ સંકલિત કરવા, નાના બંડલ કદ માટે અપડેટ કરવામાં આવ્યું છે અને તે Vue 3, ન્યૂ કમ્પોઝિશન API દસ્તાવેજને પણ સપોર્ટ કરે છે. તે આધુનિક વેબ બ્રાઉઝર, સર્વર-સાઇડ રેન્ડરિંગ અને ઇલેક્ટ્રોનને પણ સપોર્ટ કરે છે. Github પર અને 13 સાપ્તાહિક ડાઉનલોડ્સ NPM પર તેના 39,693k કરતાં વધુ સ્ટાર્સ છે.

 

7. ક્વાસર

 

ક્વાસર એ શ્રેષ્ઠ Vue UI ફ્રેમવર્કમાંનું એક છે જે વિકાસકર્તાઓને ક્વાસર CLI દ્વારા તમામ પ્લેટફોર્મ્સ માટે એક સ્રોત કોડ બેઝનો ઉપયોગ કરવાની મંજૂરી આપે છે જેમાં બૉક્સની બહારની શ્રેષ્ઠ પદ્ધતિઓ છે. તે વિકાસકર્તાઓને તેની આસપાસની અન્ય તમામ બોઈલર પ્લેટિંગ સામગ્રી (બિલ્ડ સિસ્ટમ, લેઆઉટ)ને બદલે તેમની એપ્લિકેશનની સામગ્રી પર ધ્યાન કેન્દ્રિત કરવા દે છે. તે મટિરિયલ 2.0 માર્ગદર્શિકાને અનુસરવા પર કેન્દ્રિત છે અને તે ખૂબ જ સહાયક સમુદાય પણ ધરાવે છે.

 

ક્વાસર વિશેની એક ખાસ બાબત એ છે કે એક વખત કોડ લખવાની અને સાથે જ તેને માત્ર એક કોડબેઝનો ઉપયોગ કરીને વેબસાઇટ, મોબાઇલ એપ્લિકેશન તરીકે ઉપયોગ કરવાની ક્ષમતા છે. હાલમાં બીટામાં એક નવું વર્ઝન પણ છે જે vue 3 ફીચર્સને સપોર્ટ કરશે. તેમાં ગીથબ પર લગભગ 17.8k સ્ટાર્સ છે.

 

8. Buefy

 

Buefy એ બુલ્મા (એક CSS ફ્રેમવર્ક) પર આધારિત Vue JS માટે લાઇટવેઇટ UI ઘટક લાઇબ્રેરી છે. Buefy Bulma ને Vue સાથે જોડે છે, જે તમને ન્યૂનતમ કોડનો ઉપયોગ કરીને સારી દેખાતી એપ્લિકેશન બનાવવામાં મદદ કરે છે. તે તમારા બુલ્મા ઈન્ટરફેસ માટે જાવાસ્ક્રિપ્ટ સ્તર છે.

 

તે કાં તો સામાન્ય વેબપેજ પર સંપૂર્ણપણે અથવા એકલ ઘટકોને આયાત કરી શકાય છે. તેને તમારા પ્રોજેક્ટમાં એકીકૃત કરવું એકદમ સરળ છે, કાં તો npm અથવા CDN નો ઉપયોગ કરીને કરી શકાય છે.

 

Buefy તૈયાર UI ઘટકો, લેઆઉટ અને ચિહ્નો પ્રદાન કરે છે. ઘટકો તમારી થીમ માટે SASS નો ઉપયોગ કરી શકે છે. તે આધુનિક બ્રાઉઝર્સને પણ સપોર્ટ કરે છે.

 

9. Vue સામગ્રી

 

Vue મટિરિયલ એ વ્યાપકપણે ઉપયોગમાં લેવાતું, હળવા વજનનું માળખું છે જે મટિરિયલ ડિઝાઇન વિશિષ્ટતાઓને લાગુ કરે છે. તે Vue.js અને મટિરિયલ ડિઝાઇન સ્પેક્સ વચ્ચેનું શ્રેષ્ઠ એકીકરણ છે! તમે સરળ API દ્વારા તમારી બધી જરૂરિયાતોને અનુરૂપ કરવા માટે તેને સરળતાથી ગોઠવી શકો છો.

 

તે બધા આધુનિક વેબ બ્રાઉઝર્સ માટે પ્રતિભાવ ડિઝાઇન અને સપોર્ટ સાથે સુસંગત છે. લાઇબ્રેરીને થીમ્સ, કમ્પોનન્ટ્સ અને UI એલિમેન્ટ્સમાં વિભાજિત કરવામાં આવી છે. થીમ્સ તમારી એપ્લિકેશનને કેવી રીતે થીમ બનાવવી (અથવા તમારી પોતાની થીમ્સ લખવી) અને ઘટકો અને UI એલિમેન્ટ્સમાં લેઆઉટ, નેવિગેશન, ટાઇપોગ્રાફી, ચિહ્નો અને 30 વધુ ઘટકોનો સમાવેશ થાય છે તેના પર ચોક્કસ માર્ગદર્શિકા આપે છે. તેમાં ગીથબ અને 9.2k + સાપ્તાહિક ડાઉનલોડ્સ NPM પર લગભગ 1.1k સ્ટાર્સ અને 21k ફોર્ક્સ છે.

 

10. KeenUI

 

KeenUI એ એક સરળ API સાથેની હળવા વજનની vue.js UI લાઇબ્રેરી છે, જે Googleની મટિરિયલ ડિઝાઇનથી પ્રેરિત છે. આતુર UI એ CSS ફ્રેમવર્ક નથી. તેથી, તેમાં ગ્રીડ સિસ્ટમ, ટાઇપોગ્રાફી વગેરેની શૈલીઓનો સમાવેશ થતો નથી. તેના બદલે, જાવાસ્ક્રિપ્ટની જરૂર હોય તેવા ઇન્ટરેક્ટિવ ઘટકો પર ધ્યાન કેન્દ્રિત કરવામાં આવે છે.

 

તેમાં લગભગ 30 ફરીથી વાપરી શકાય તેવા ઘટકો છે. ઘટકો SASS ચલોનો ઉપયોગ કરીને શૈલીઓને ઓવરરાઇડ કરીને કસ્ટમાઇઝ કરી શકાય છે. તમે તેને તમારા પ્રોજેક્ટમાં CDN અથવા npm નો ઉપયોગ કરીને એકીકૃત કરી શકો છો. તે ઓપન સોર્સ છે અને Github પર લગભગ 4k સ્ટાર્સ ધરાવે છે.

 

ઉપસંહાર

 

UI કમ્પોનન્ટ લાઇબ્રેરીઓ ચોક્કસપણે પ્રોજેક્ટને ખૂબ સરળ બનાવે છે. યોગ્ય પસંદ કરવાનું તમે જે પ્રોજેક્ટ પર કામ કરવા માંગો છો તેના પર આધાર રાખે છે. નવા પ્રોજેક્ટમાં ડાઇવિંગ કરતા પહેલા, વ્યક્તિ માટે UI ઘટક લાઇબ્રેરીની સમીક્ષા કરવાની સલાહ આપવામાં આવે છે જે હેતુ માટે સૌથી યોગ્ય છે.