Nuxt 3 بیس بلاگ ٹیمپلیٹ – Bfotool Nuxtjs بیس بلاگ(Vue 3 + TypeScript + Tailwind)

اگر آپ ایک جدید Nuxt 3 بلاگ اسٹارٹر ٹیمپلیٹ تلاش کر رہے ہیں تو Bfotool Nuxtjs Base Blog ایک بہترین حل ہے۔ یہ ایک مکمل طور پر فعال بلاگ ایپلی کیشن ہے جسے Nuxt 3، Vue 3، TypeScript، اور Tailwind CSS کے ساتھ بنایا گیا ہے ، جو ڈویلپرز کو ترقی کے دوران بیک اینڈ کی ضرورت کے بغیر فوری طور پر ایک پیشہ ور بلاگ بنانے میں مدد کرنے کے لیے ڈیزائن کیا گیا ہے۔

پروجیکٹ میں Axios interceptors کے ذریعے چلنے والی ایک جعلی API پرت شامل ہے ، جو ایک حقیقی REST API کی نقل کرتی ہے۔ یہ اسے Nuxt فن تعمیر سیکھنے، پروٹو ٹائپنگ ایپلی کیشنز، یا پروڈکشن کے لیے تیار بلاگ پلیٹ فارم بنانے کے لیے بہترین بناتا ہے۔

آپ یہاں ذخیرہ کو تلاش کر سکتے ہیں: 👉 https://github.com/bfotool/nuxtjs-base-blog

Bfotool Nuxtjs بیس بلاگ کیا ہے؟

Bfotool Nuxtjs Base Blog ایک جدید بلاگ ایپلیکیشن ٹیمپلیٹ ہے جسے جدید ترین فرنٹ اینڈ ٹیکنالوجیز کا استعمال کرتے ہوئے بنایا گیا ہے۔ یہ خطوط، زمرہ جات، تلاش کی فعالیت، اور رابطہ صفحات کے ساتھ ایک مکمل بلاگنگ انٹرفیس فراہم کرتا ہے۔

پروجیکٹ کو صاف ستھرا Nuxt 3 فن تعمیر کے ساتھ ڈیزائن کیا گیا ہے ، جس سے اسے سمجھنا اور بڑھانا آسان ہے۔

اہم جھلکیوں میں شامل ہیں:

ذمہ دار ڈیزائن کے ساتھ مکمل بلاگ UI
بیک اینڈ کے بغیر ترقی کے لیے Mock REST API
جدید Vue 3 کمپوزیشن API کے ساتھ بنایا گیا ہے۔
TypeScript کے ساتھ ٹائپ سیف ڈیولپمنٹ
SEO کے لیے تیار میٹا کنفیگریشن
گہرا اور ہلکا تھیم سپورٹ

ذخیرہ یہاں پایا جا سکتا ہے:

👉 https://github.com/bfotool/nuxtjs-base-blog

یہ ٹیمپلیٹ ان کے لیے مثالی ہے:

ذاتی بلاگز
کمپنی کے بلاگز
ڈویلپر پورٹ فولیوز
Nuxt 3 فن تعمیر سیکھنا
مواد کی ویب سائٹس کی تیزی سے پروٹو ٹائپنگ

کلیدی خصوصیات

C class="ac-h3"مکمل بلاگ صفحات

ٹیمپلیٹ میں صفحات کا مکمل طور پر نافذ کردہ سیٹ شامل ہوتا ہے جو عام طور پر بلاگ پلیٹ فارم میں درکار ہوتا ہے۔

اہم صفحات میں شامل ہیں:

ہوم پیج- ایک نمایاں ہیرو پوسٹ، زمرہ فلٹرز، اور صفحہ بندی والی پوسٹس دکھاتا ہے۔
بلاگ پوسٹ کا صفحہ- مندرجات کے جدول اور متعلقہ پوسٹس کے ساتھ مکمل مضمون کا منظر
زمرہ صفحہ- زمرہ کے لحاظ سے فلٹر کردہ پوسٹس کو براؤز کریں۔
تلاش کا صفحہ- ڈیباؤنس فعالیت کے ساتھ اصل وقت کی تلاش
صفحہ کے بارے میں- اپنی ٹیم، مشن، یا برانڈ کو متعارف کروائیں۔
رابطہ صفحہ- توثیق اور ٹوسٹ فیڈ بیک کے ساتھ فارم سے رابطہ کریں۔
خرابی کا صفحہ- اپنی مرضی کے مطابق غلطی کو سنبھالنے والا UI

یہ ڈھانچہ صارفین کے لیے استعمال کے لیے تیار بلاگ تجربہ فراہم کرتا ہے۔

< class="ac-h3"h3> ترقی کے لیے جعلی API پرت

اس پروجیکٹ کی سب سے طاقتور خصوصیات میں سے ایک موک API سسٹم ہے ۔

حقیقی پسدید سے منسلک ہونے کے بجائے، پروجیکٹ Axios interceptors کا استعمال کرتے ہوئے API کے جوابات کی نقل کرتا ہے ۔

یہ نقطہ نظر ڈویلپرز کو اجازت دیتا ہے:

پسدید انحصار کے بغیر فرنٹ اینڈ کی خصوصیات بنائیں
صفحہ بندی، فلٹرنگ، اور چھانٹنا ٹیسٹ کریں۔
حقیقی API جوابی تاخیر کی تقلید کریں۔
بعد میں آسانی سے حقیقی پسدید پر سوئچ کریں۔

فرضی API میں اختتامی نکات شامل ہیں جیسے:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

چونکہ API کو useApi composable کے ذریعے خلاصہ کیا جاتا ہے ، اس لیے حقیقی پسدید پر سوئچ کرنے کے لیے کم سے کم کنفیگریشن کی ضرورت ہوتی ہے۔

جدید Nuxt 3 فن تعمیر

یہ پروجیکٹ تجویز کردہ Nuxt 3 کے ترقیاتی نمونوں کی پیروی کرتا ہے ، جس سے یہ فریم ورک سیکھنے والے ڈویلپرز کے لیے ایک بہترین حوالہ ہے۔

اہم تعمیراتی خصوصیات میں شامل ہیں:

خودکار درآمد شدہ اجزاء اور کمپوز ایبل
ٹائپ اسکرپٹ- پہلی ترقی
کمپوز ایبل API سروس پرت
ماڈیولر فولڈر کا ڈھانچہ
SEO میٹا کنفیگریشن
صفحہ کی منتقلی

ایپلی کیشن بھی استعمال کرتی ہے:

useSeoMeta()SEO ٹیگز کے لیے
useColorMode()تھیم سوئچنگ کے لیے
useRoute()اور دیگر بلٹ ان Nuxt کمپوز ایبلز

< class="ac-h3"h3>ڈارک موڈ اور ریسپانسیو ڈیزائن

UI سیاہ اور ہلکے تھیمز کو استعمال کرتے ہوئے سپورٹ کرتا ہے @nuxtjs/color-mode۔

خصوصیات میں شامل ہیں:

خودکار نظام تھیم کا پتہ لگانا
دستی تھیم ٹوگل
Tailwind CSS اسٹائلنگ
موبائل-پہلے ذمہ دار لے آؤٹ

یہ یقینی بناتا ہے کہ بلاگ بغیر کسی رکاوٹ کے کام کرتا ہے:

ڈیسک ٹاپ
گولیاں
موبائل آلات

P class="ac-h3"اوورفول بلاگ کی خصوصیات

بلاگ ٹیمپلیٹ میں کئی جدید خصوصیات شامل ہیں جو عام طور پر پروڈکشن بلاگ پلیٹ فارمز میں پائی جاتی ہیں۔

ان میں شامل ہیں:

مارک ڈاؤن سرخیوں سے تیار کردہ مواد کا جدول
متعلقہ پوسٹس کی تجاویز
پڑھنے کا تخمینہ وقت
زمرہ فلٹرنگ
مکمل متن کی تلاش کو خارج کر دیا گیا۔
اسمارٹ صفحہ بندی
ٹوسٹ اطلاعات
کنکال کے اجزاء کو لوڈ کیا جا رہا ہے۔
متحرک صفحہ کی منتقلی

یہ خصوصیات بلاگ دیکھنے والوں کے لیے پڑھنے کا ایک جدید تجربہ بناتی ہیں۔

ٹیکنالوجی اسٹیک

پروجیکٹ کو جدید فرنٹ اینڈ اسٹیک کا استعمال کرتے ہوئے بنایا گیا ہے۔

تہہ	ٹیکنالوجی
فریم ورک	نمبر 3.15
UI لائبریری	Vue 3.5
زبان	ٹائپ اسکرپٹ 5.7
اسٹائلنگ	Tailwind CSS 3.4
ریاستی انتظام	پینیا
HTTP کلائنٹ	محور
شبیہیں	@nuxt/icon کے ذریعے Iconify کریں۔
تھیم	@nuxtjs/color-mode
لنٹنگ	ESLint
فارمیٹنگ	خوبصورت

یہ اسٹیک کارکردگی، توسیع پذیری، اور برقرار رکھنے کی صلاحیت فراہم کرتا ہے ۔

پروجیکٹ کی ساخت کا جائزہ

ذخیرہ صاف اور منظم ڈھانچے کی پیروی کرتا ہے۔

اہم ڈائریکٹریز میں شامل ہیں:

صفحات

ڈائریکٹری pagesاہم راستوں کی وضاحت کرتی ہے:

index.vue- ہوم پیج
about.vue- صفحہ کے بارے میں
contact.vue- رابطہ فارم
search.vue- تلاش انٹرفیس
blog/[slug].vue- بلاگ پوسٹ کا صفحہ
blog/category/[slug].vue- زمرہ کا صفحہ

Com class="ac-h3"ponents

دوبارہ قابل استعمال UI اجزاء کو منطقی زمروں میں گروپ کیا گیا ہے:

layout- ہیڈر اور فوٹر
common- صفحہ بندی، سکیلیٹن لوڈرز، ٹوسٹ اطلاعات
blog- بلاگ کے لیے مخصوص اجزاء جیسے پوسٹ کارڈز اور مواد کی میز

Comp class="ac-h3"osables

کمپوز ایبل ڈائرکٹری دوبارہ قابل استعمال منطق پر مشتمل ہے۔

اہم کمپوز ایبلز میں شامل ہیں:

useApi()- ٹائپ شدہ API سروس پرت
useDebounce()- رد عمل والی اقدار کو ڈیباؤنس کریں۔

< class="ac-h3"h3> فرضی API پرت

فرضی نظام mocksڈائریکٹری کے اندر واقع ہے۔

اس میں شامل ہیں:

handlers.ts- API درخواست انٹرسیپٹرز
posts.ts- نمونہ بلاگ پوسٹس
authors.ts- مصنف کا ڈیٹا
categories.ts- زمرہ کا ڈیٹا

یہ ڈھانچہ اس منصوبے میں ترمیم اور توسیع کو آسان بناتا ہے ۔

پروجیکٹ کو کیسے انسٹال اور چلائیں۔

پروجیکٹ کو مقامی طور پر چلانے کے لیے ان اقدامات پر عمل کریں۔

Prereq class="ac-h3"uisites

آپ کو ضرورت ہے:

Node.js 18.17 یا بعد کا
این پی ایم، یارن، یا پی این پی ایم

ریپوزٹری کو کلون کریں۔

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

class="ac-h3"انسٹال انحصار

npm install

ڈویلپمنٹ سرور شروع کریں۔

npm run dev

پھر اپنا براؤزر اس پر کھولیں:

http://localhost:3000

فائلز تبدیل ہونے پر نکسٹ ڈویلپمنٹ سرور خود بخود دوبارہ لوڈ ہو جائے گا۔

موک API سے اصلی API میں تبدیل کرنا

اس پروجیکٹ میں ڈیزائن کے بہترین فیصلوں میں سے ایک آسان API سوئچ ہے ۔

ایک حقیقی پسدید کو مربوط کرنے کے لیے:

ماحولیاتی متغیر مقرر کریں:

NUXT_PUBLIC_USE_MOCK_API=false

اپنا API بیس URL ترتیب دیں:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

یقینی بنائیں کہ آپ کا پسدید جواب اس میں بیان کردہ اقسام سے مماثل ہے:

types/index.ts

کسی اضافی کوڈ میں تبدیلی کی ضرورت نہیں ہے۔

بلاگ کو حسب ضرورت بنانا

ڈویلپر آسانی سے ٹیمپلیٹ کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

تھیم یا طرزیں تبدیل کریں۔

Tailwind کنفیگریشن میں ترمیم کریں:

tailwind.config.ts

عالمی شیلیوں میں واقع ہیں:

assets/css/main.css

بلاگ کے مواد میں ترمیم کریں۔

فرضی مواد کو اس میں اپ ڈیٹ کیا جا سکتا ہے:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

یہ آپ کو مختلف بلاگ ڈیٹاسیٹس کو تیزی سے پروٹو ٹائپ کرنے کی اجازت دیتا ہے۔

ایپ کی ترتیبات کو اپ ڈیٹ کریں۔

نیویگیشن، برانڈنگ، اور سماجی روابط جیسے ایپلیکیشن کنسٹینٹس اس میں محفوظ ہیں:

utils/constants.ts

یہ Nuxt بلاگ ٹیمپلیٹ کیوں استعمال کریں؟

یہ پروجیکٹ ڈویلپرز کے لیے ایک بہترین انتخاب ہے کیونکہ یہ فراہم کرتا ہے:

کلین Nuxt 3 فن تعمیر
پروڈکشن لیول کوڈ کا ڈھانچہ
فرنٹ اینڈ ڈیولپمنٹ کے لیے موک API
Tailwind CSS کے ساتھ جدید UI
SEO کے لیے تیار صفحات
اصلی APIs کے ساتھ آسان انضمام

یہ سیکھنے کے منصوبے اور پروڈکشن کے لیے تیار بلاگ فاؤنڈیشن دونوں کے طور پر کام کرتا ہے ۔

GitHub ذخیرہ

آپ مکمل سورس کوڈ کو یہاں دریافت کر سکتے ہیں: 👉 https://github.com/bfotool/nuxtjs-base-blog

اگر آپ کو پروجیکٹ کارآمد لگتا ہے تو، ذخیرے کو ستارہ کرنے اور بہتری میں تعاون کرنے پر غور کریں۔