Vue JS ایک ترقی پسند JavaScript فریم ورک ہے جو سنگل پیج ایپلیکیشنز (SPAs) اور یوزر انٹرفیس تیار کرنے کے لیے استعمال ہوتا ہے۔ اور یہ وہاں پر سب سے زیادہ استعمال ہونے والے فرنٹ اینڈ فریم ورک میں سے ایک ہے۔
Vue کی ایک دلچسپ خصوصیت ویب پیج کو مختلف اجزاء میں تقسیم کرنے کی صلاحیت ہے۔ اور یہ عمل UI جزو لائبریریوں کے استعمال سے آسان ہو جاتا ہے۔
مختلف UI اجزاء کی لائبریریاں ہیں جو آپ کو آسانی سے اور جلدی اجزاء بنانے میں مدد کر سکتی ہیں۔ تو اس بلاگ میں، ہم 10 کے لیے سرفہرست 2021 Vue UI اجزاء کی لائبریریوں کا جائزہ لینے جا رہے ہیں۔
1. پرائم ویو
پرائم ویو استعمال میں آسان، ورسٹائل اور پرفارمنٹ Vue UI کمپوننٹ لائبریری ہے جو آپ کو زبردست یوزر انٹرفیس بنانے میں مدد کرتی ہے۔
اس میں 80+ سے زیادہ UI اجزاء ہیں جو ویب مواد تک رسائی کے رہنما خطوط (WCAG) اور جوابی ڈیزائن کے لیے مکمل تعاون کے ساتھ ہیں۔ اور ایک حالیہ اپ ڈیٹ کی بدولت، لائبریری کو اب Vue 3 کے لیے مکمل سپورٹ حاصل ہے۔ اسے مزید اجزاء بھی ملے ہیں۔
پرائم ویو کے بارے میں ایک بہترین چیز اس کے اجزاء کی وسیع رینج ہے۔ ان کی رینج ٹیبلز اور پیجینٹرز سے لے کر اچھی طرح سے تیار کردہ گراف پر مبنی تنظیمی چارٹس تک ہے جسے آپ انٹرایکٹو Vue ایپس بنانے کے لیے استعمال کر سکتے ہیں۔ یہ اوپن سورس ہے اور Github پر 1k+ ستارے اور NPM پر ہفتہ وار 6,983 ڈاؤن لوڈز ہیں۔
2. Vuetify
Vuetify ایک Vue UI لائبریری ہے جس میں خوبصورتی سے دستکاری والے اجزاء ہیں جو میٹریل ڈیزائن کی تفصیلات کا استعمال کرتے ہیں۔ اس کا مطلب یہ ہے کہ اسے بالکل مادی ڈیزائن کی وضاحتوں کے مطابق تیار کیا گیا ہے جس میں ہر جزو کو ماڈیولر، جوابدہ اور پرفارم کرنے کے لیے احتیاط سے تیار کیا گیا ہے۔
Vuetify آپ کو اپنی ایپلی کیشنز کو منفرد اور متحرک لے آؤٹ کے ساتھ اپنی مرضی کے مطابق بنانے اور SASS متغیرات کا استعمال کرتے ہوئے اپنے اجزاء کے انداز کو مکمل کرنے دیتا ہے۔
یہ رسائی کے رہنما خطوط، تمام جدید براؤزرز کو بھی سپورٹ کرتا ہے، اور Vue CLI-3 کے ساتھ مطابقت رکھتا ہے۔ یہ ضم کرنا آسان ہے اور اس میں دوبارہ قابل استعمال UI اجزاء جیسے carousels، نیویگیشنز اور کارڈز ہیں۔ 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 فورکس کے ساتھ گیتھب پر اوپن سورس ہے۔
5. ووسیکس
Vuesax ایک نیا UI جزو فریم ورک ہے جو Vuejs کے ساتھ بنایا گیا ہے تاکہ پروجیکٹس کو آسانی سے اور ایک منفرد اور خوشگوار انداز کے ساتھ بنایا جا سکے، vuesax شروع سے تخلیق کیا گیا ہے اور فرنٹ اینڈ پریمی سے لے کر بیک اینڈ تک تمام قسم کے ڈویلپرز کے لیے ڈیزائن کیا گیا ہے جو آسانی سے اپنا بصری نقطہ نظر تخلیق کرنا چاہتے ہیں۔ اختتامی صارف. ڈیزائن ہر جزو کے لیے منفرد ہوتے ہیں اور کسی بھی بصری رجحانات یا ڈیزائن کے قواعد کے مطابق نہیں ہوتے ہیں، جو اس کے ساتھ بنائے گئے پراجیکٹس کو بھی منفرد بناتے ہیں۔
یہ ریسپانسیو پیجز اور دوبارہ قابل استعمال اور حسب ضرورت UI اجزاء پیش کرتا ہے۔ npm یا CDN کا استعمال کرتے ہوئے شروع کرنا بھی آسان ہے۔ یہ فی الحال اپنے حالیہ ورژن میں Vue CLI 3 کو سپورٹ نہیں کرتا ہے۔ یہ تقریباً 4.9k ستاروں اور 6700 ہفتہ وار ڈاؤن لوڈز NPM کے ساتھ گیتھب پر اوپن سورس ہے۔
6. چیونٹی ڈیزائن Vue
Ant Design vue Ant Design کی تفصیلات پر مبنی، Ant design vue ایک vue UI لائبریری ہے جس میں بھرپور، انٹرایکٹو یوزر انٹرفیس بنانے کے لیے اعلیٰ معیار کے اجزاء اور ڈیمو کا ایک سیٹ ہوتا ہے۔
Ant-design-vue آپ کی ویب ایپلیکیشنز جیسے کہ Skeleton, drawer, statistics اور بہت کچھ کو مزید تقویت دینے کے لیے UI اجزاء کی کافی مقدار فراہم کرتا ہے۔
اینٹ ڈیزائن ویو ورژن 2 کی حالیہ ریلیز کے ساتھ، اسے تیز تر اور آسانی سے مربوط کرنے کے لیے اپ ڈیٹ کیا گیا ہے، چھوٹے بنڈل سائز، اور Vue 3، نیو کمپوزیشن API دستاویز کو بھی سپورٹ کرتا ہے۔ یہ جدید ویب براؤزرز، سرور سائیڈ رینڈرنگ، اور الیکٹران کو بھی سپورٹ کرتا ہے۔ Github پر اور 13 ہفتہ وار ڈاؤن لوڈز NPM پر اس کے 39,693k سے زیادہ ستارے ہیں۔
7. کوثر
Quasar بہترین Vue UI فریم ورکس میں سے ایک ہے جو ڈویلپرز کو Quasar CLI کے ذریعے تمام پلیٹ فارمز کے لیے ایک سورس کوڈ بیس استعمال کرنے کی اجازت دیتا ہے۔ یہ ڈویلپرز کو اس کے ارد گرد دیگر تمام بوائلر چڑھانے والی چیزوں (بلڈ سسٹم، لے آؤٹ) کی بجائے اپنے ایپ کے مواد پر توجہ مرکوز کرنے دیتا ہے۔ یہ میٹریل 2.0 کے رہنما خطوط پر عمل کرنے پر مرکوز ہے اور اس کی ایک بہت معاون کمیونٹی بھی ہے۔
Quasar کے بارے میں ایک خاص بات یہ ہے کہ کوڈ کو ایک بار لکھنا اور ساتھ ہی اسے ایک ویب سائٹ، ایک موبائل ایپ کے طور پر صرف ایک کوڈ بیس کا استعمال کرتے ہوئے تعینات کرنا ہے۔ بیٹا میں فی الحال ایک نیا ورژن بھی ہے جو vue 3 خصوصیات کو سپورٹ کرے گا۔ اس کے گیتھب پر تقریباً 17.8k ستارے ہیں۔
8. بوفی
Buefy بلما (ایک CSS فریم ورک) پر مبنی Vue JS کے لیے ایک ہلکا پھلکا UI جزو لائبریری ہے۔ Buefy Bulma کو Vue کے ساتھ جوڑتا ہے، جس سے آپ کو کم سے کم کوڈ کا استعمال کرتے ہوئے اچھی نظر آنے والی ایپلی کیشنز بنانے میں مدد ملتی ہے۔ یہ آپ کے بلما انٹرفیس کے لیے جاوا اسکرپٹ پرت ہے۔
اسے یا تو مکمل طور پر درآمد کیا جا سکتا ہے یا عام ویب پیج پر واحد اجزاء۔ اسے اپنے پروجیکٹ میں ضم کرنا کافی آسان ہے، یا تو npm یا CDN کا استعمال کرتے ہوئے کیا جا سکتا ہے۔
Buefy ریڈی میڈ UI اجزاء، لے آؤٹ اور شبیہیں فراہم کرتا ہے۔ اجزاء آپ کے تھیم میں SASS کا استعمال کر سکتے ہیں۔ یہ جدید براؤزرز کو بھی سپورٹ کرتا ہے۔
9. ویو میٹریل
Vue میٹریل ایک وسیع پیمانے پر استعمال ہونے والا، ہلکا پھلکا فریم ورک ہے جو مٹیریل ڈیزائن کی خصوصیات کو لاگو کرتا ہے۔ یہ Vue.js اور میٹریل ڈیزائن کے چشموں کے درمیان بہترین انضمام میں سے ایک ہے! آپ اسے آسانی سے ایک آسان API کے ذریعے اپنی تمام ضروریات کے مطابق ترتیب دے سکتے ہیں۔
یہ تمام جدید ویب براؤزرز کے لیے ذمہ دار ڈیزائن اور سپورٹ کے ساتھ مطابقت رکھتا ہے۔ لائبریری کو تھیمز، اجزاء، اور UI عناصر میں تقسیم کیا گیا ہے۔ تھیمز آپ کی ایپلیکیشن کو تھیم کرنے کے طریقے کے بارے میں ایک حتمی گائیڈ دیتے ہیں (یا اپنے تھیمز لکھیں) اور اجزاء اور UI عناصر لے آؤٹ، نیویگیشن، ٹائپوگرافی، شبیہیں، اور 30 مزید اجزاء پر مشتمل ہوتے ہیں۔ اس میں Github پر تقریباً 9.2k ستارے اور 1.1k فورکس ہیں اور 21k + ہفتہ وار ڈاؤن لوڈز NPM ہیں۔
10. KeenUI
KeenUI ایک ہلکی پھلکی vue.js UI لائبریری ہے جس میں ایک سادہ API ہے، جو گوگل کے میٹریل ڈیزائن سے متاثر ہے۔ کین UI ایک CSS فریم ورک نہیں ہے۔ اس لیے، اس میں گرڈ سسٹم، ٹائپوگرافی وغیرہ کی طرزیں شامل نہیں ہیں۔ اس کے بجائے، توجہ ان انٹرایکٹو اجزاء پر ہے جن کے لیے جاوا اسکرپٹ کی ضرورت ہوتی ہے۔
اس میں تقریباً 30 دوبارہ قابل استعمال اجزاء ہیں۔ SASS متغیرات کا استعمال کرتے ہوئے سٹائل کو اوور رائیڈ کر کے اجزاء حسب ضرورت ہیں۔ آپ اسے اپنے پروجیکٹ میں CDN یا npm کا استعمال کر کے ضم کر سکتے ہیں۔ یہ اوپن سورس ہے اور گیتھب پر تقریباً 4k ستارے ہیں۔
نتیجہ
UI اجزاء کی لائبریریاں یقینی طور پر کسی پروجیکٹ کو بہت آسان بناتی ہیں۔ صحیح کو منتخب کرنا اس پروجیکٹ کی خصوصیات پر منحصر ہے جس پر آپ کام کرنا چاہتے ہیں۔ کسی نئے پروجیکٹ میں غوطہ لگانے سے پہلے، کسی کے لیے یہ مشورہ دیا جاتا ہے کہ وہ UI اجزاء کی لائبریری کا جائزہ لے جو اس مقصد کے لیے بہترین ہے۔