Vue JS एक प्रगतीशील JavaScript फ्रेमवर्क आहे जो सिंगल-पेज ऍप्लिकेशन्स (SPA) आणि वापरकर्ता इंटरफेस विकसित करण्यासाठी वापरला जातो. आणि हे सर्वात मोठ्या प्रमाणावर वापरल्या जाणाऱ्या फ्रंट-एंड फ्रेमवर्कपैकी एक आहे.

 

Vue चे एक मनोरंजक वैशिष्ट्य म्हणजे वेबपृष्ठ वेगवेगळ्या घटकांमध्ये विभाजित करण्याची क्षमता. आणि ही प्रक्रिया UI घटक लायब्ररीच्या वापराने सोपी होते.

 

विविध UI घटक लायब्ररी आहेत जी तुम्हाला सहज आणि द्रुतगतीने घटक तयार करण्यात मदत करू शकतात. म्हणून या ब्लॉगमध्ये, आम्ही 10 साठी शीर्ष 2021 Vue UI घटक लायब्ररींचे पुनरावलोकन करणार आहोत.

 

1. प्राइमव्ह्यू

 

PrimeVue वापरण्यास सोपी, अष्टपैलू आणि कार्यक्षम 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 मॉड्यूल वापरून BootstrapVue ला तुमच्या Nuxt.js प्रोजेक्टमध्ये सहजपणे समाकलित करू शकता.

 

बूटस्ट्रॅप CSS फ्रेमवर्क वापरला जात आहे त्याच प्रकारे हे देखील वापरले जाते. हे सुमारे 12.9k तारे आणि 1.7k फॉर्क्ससह Github वर ओपन-सोर्स केलेले आहे.

 

5. व्ह्यूसॅक्स

 

Vuesax ही एक नवीन UI घटक फ्रेमवर्क आहे जी Vuejs सह प्रकल्प सहजतेने आणि अद्वितीय आणि आनंददायी शैलीसह तयार केली गेली आहे, vuesax सुरवातीपासून तयार केले गेले आहे आणि फ्रंटएंड प्रेमीपासून बॅकएंडपर्यंत सर्व प्रकारच्या विकासकांसाठी डिझाइन केले आहे ज्यांना त्यांचा व्हिज्युअल दृष्टीकोन सहजपणे तयार करायचा आहे. अंतिम वापरकर्ता. डिझाईन्स प्रत्येक घटकासाठी अद्वितीय आहेत आणि कोणत्याही दृश्य ट्रेंड किंवा डिझाइन नियमांनुसार अँकर केलेले नाहीत, ज्यामुळे त्यासह तयार केलेले प्रकल्प देखील अद्वितीय बनतात.

 

हे प्रतिसादात्मक पृष्ठे आणि पुन्हा वापरता येण्याजोगे आणि सानुकूल करण्यायोग्य UI घटक ऑफर करते. npm किंवा CDN वापरून प्रारंभ करणे देखील सोपे आहे. हे सध्या त्याच्या अलीकडील आवृत्तीमध्ये Vue CLI 3 ला समर्थन देत नाही. हे Github वर सुमारे 4.9k तारे आणि 6700 साप्ताहिक डाउनलोड NPM सह मुक्त-स्रोत आहे.

 

6. मुंगी डिझाइन व्ह्यू

 

अँट डिझाईन स्पेसिफिकेशनवर आधारित अँट डिझाईन व्ह्यू, अँट डिझाइन व्ह्यू ही एक व्ह्यू UI लायब्ररी आहे ज्यामध्ये समृद्ध, परस्परसंवादी वापरकर्ता इंटरफेस तयार करण्यासाठी उच्च-गुणवत्तेच्या घटकांचा आणि डेमोचा संच आहे.

 

Ant-design-vue तुमचे वेब ऍप्लिकेशन जसे की Skeleton, drawer, statistics आणि बरेच काही समृद्ध करण्यासाठी भरपूर UI घटक प्रदान करते.

 

अँटी डिझाइन व्ह्यू आवृत्ती 2 च्या अलीकडील रिलीझसह, ते अधिक जलद आणि समाकलित करणे सोपे, लहान बंडल आकारासाठी अद्यतनित केले गेले आहे आणि Vue 3, नवीन रचना API दस्तऐवजाचे समर्थन देखील करते. हे आधुनिक वेब ब्राउझर, सर्व्हर-साइड रेंडरिंग आणि इलेक्ट्रॉनला देखील समर्थन देते. Github वर आणि 13 साप्ताहिक डाउनलोड NPM वर 39,693k तारे आहेत.

 

7. क्वासार

 

क्वासार हे सर्वोत्तम Vue UI फ्रेमवर्कपैकी एक आहे जे विकसकांना Quasar CLI द्वारे सर्व प्लॅटफॉर्मसाठी एक सोर्स कोड बेस वापरण्याची अनुमती देते आणि बॉक्सच्या बाहेर सर्वोत्तम पद्धती आहेत. हे विकसकांना त्यांच्या भोवती इतर सर्व बॉयलर प्लेटिंग सामग्री (बिल्ड सिस्टम, लेआउट) ऐवजी त्यांच्या ॲपच्या सामग्रीवर लक्ष केंद्रित करू देते. हे मटेरियल 2.0 मार्गदर्शक तत्त्वांचे पालन करण्यावर लक्ष केंद्रित करते आणि एक अतिशय सहाय्यक समुदाय देखील आहे.

 

Quasar बद्दलची एक खास गोष्ट म्हणजे कोड एकदा लिहिण्याची आणि एकाच वेळी फक्त एक कोडबेस वापरून वेबसाइट, मोबाइल ॲप म्हणून उपयोजित करण्याची क्षमता. सध्या बीटामध्ये एक नवीन आवृत्ती देखील आहे जी vue 3 वैशिष्ट्यांना समर्थन देईल. यात गिथबवर सुमारे 17.8k तारे आहेत.

 

8. Buefy

 

Buefy ही बुल्मा (सीएसएस फ्रेमवर्क) वर आधारित Vue JS साठी लाइटवेट UI घटक लायब्ररी आहे. Buefy Bulma ला Vue सह एकत्रित करते, तुम्हाला किमान कोड वापरून चांगले दिसणारे ॲप्लिकेशन तयार करण्यात मदत करते. तुमच्या बुलमा इंटरफेससाठी हा जावास्क्रिप्ट स्तर आहे.

 

हे एकतर पूर्णपणे आयात केले जाऊ शकते किंवा सामान्य वेबपृष्ठावर एकल घटक. ते तुमच्या प्रोजेक्टमध्ये समाकलित करणे खूप सोपे आहे, एकतर npm किंवा CDN वापरून केले जाऊ शकते.

 

Buefy रेडीमेड UI घटक, लेआउट आणि चिन्ह प्रदान करते. घटक आपल्या थीमवर SASS वापरू शकतात. हे आधुनिक ब्राउझरला देखील समर्थन देते.

 

9. व्ह्यू मटेरियल

 

Vue मटेरिअल हे मोठ्या प्रमाणावर वापरले जाणारे, हलके फ्रेमवर्क आहे जे मटेरियल डिझाइन वैशिष्ट्यांची अंमलबजावणी करते. हे Vue.js आणि मटेरियल डिझाइन चष्म्यांमधील सर्वोत्तम एकीकरण आहे! सोप्या API द्वारे तुम्ही तुमच्या सर्व गरजा पूर्ण करण्यासाठी ते सहजपणे कॉन्फिगर करू शकता.

 

हे सर्व आधुनिक वेब ब्राउझरसाठी प्रतिसादात्मक डिझाइन आणि समर्थनाशी सुसंगत आहे. लायब्ररी थीम, घटक आणि UI घटकांमध्ये विभागली गेली आहे. थीम तुमच्या ऍप्लिकेशनची थीम कशी बनवायची (किंवा तुमची स्वतःची थीम लिहा) आणि घटक आणि UI घटकांमध्ये लेआउट, नेव्हिगेशन, टायपोग्राफी, आयकॉन आणि आणखी 30 घटक असतात याविषयी निश्चित मार्गदर्शन देतात. यात Github आणि 9.2k + साप्ताहिक डाउनलोड NPM वर सुमारे 1.1k तारे आणि 21k फॉर्क्स आहेत.

 

10. KeenUI

 

KeenUI ही Google च्या मटेरिअल डिझाईनद्वारे प्रेरित, साध्या API सह हलकी वजनाची vue.js UI लायब्ररी आहे. Keen UI ही CSS फ्रेमवर्क नाही. त्यामुळे, यात ग्रिड सिस्टीम, टायपोग्राफी इ.च्या शैलींचा समावेश नाही. त्याऐवजी, जावास्क्रिप्ट आवश्यक असलेल्या परस्परसंवादी घटकांवर लक्ष केंद्रित केले जाते.

 

यात सुमारे 30 पुनर्वापर करण्यायोग्य घटक आहेत. SASS व्हेरिएबल्स वापरून शैली ओव्हरराइड करून घटक सानुकूल करता येतात. तुम्ही ते तुमच्या प्रोजेक्टमध्ये CDN किंवा npm वापरून समाकलित करू शकता. हे ओपन सोर्स केलेले आहे आणि गिथबवर सुमारे 4k तारे आहेत.

 

निष्कर्ष

 

UI घटक लायब्ररी निश्चितपणे प्रकल्प तयार करणे खूप सोपे करतात. तुम्ही ज्या प्रकल्पावर काम करू इच्छिता त्या प्रकल्पाच्या वैशिष्ट्यांवर योग्य निवड करणे अवलंबून असते. नवीन प्रकल्पात जाण्यापूर्वी, एखाद्याने UI घटक लायब्ररीचे पुनरावलोकन करणे उचित आहे जे हेतूसाठी सर्वात योग्य आहे.