nuxt3-playground — مساحة تجريب عملية لـ Nuxt 3

مستودع تعلّم لا منتج — مدوّنة عمل منظّمة أثناء استكشاف Nuxt 3 ميزة بعد أخرى.

نظرة عامة

nuxt3-playground مساحة تجريب لـ Nuxt 3: كل موضوع يُجرّب عملياً في المشروع، ثم يُلخّص في ملف توثيق مستقل داخل docs/.

البداية من مشروع فارغ، ثم دورة الأوامر الأربعة التي يقوم عليها أي مشروع Nuxt:

npx nuxi init <project-name>
npm run dev       # التطوير
npm run build     # البناء للإنتاج
npm run generate  # توليد ملفات ساكنة في dist

المشكلة

القفزة إلى Nuxt 3 ليست ترقية رقم إصدار، والتوثيق الرسمي يشرح كل ميزة منفردة دون أن يقول كيف تجتمع في مشروع واحد. وأسئلة مثل "ما الفرق بين build وgenerate؟" أو "أين توضع واجهة وهمية أثناء التطوير؟" لا تُجاب إلا بالتجريب.

التخطيط

رُتّبت المواضيع من الأقرب إلى المشروع إلى الأبعد عنه، لا حسب ترتيب التوثيق الرسمي:

المحور	ما يُجاب عنه
دورة المشروع	الإنشاء والتطوير والبناء والتوليد الساكن
التنسيق	دمج TailwindCSS مع Nuxt 3
البيانات	واجهة وهمية بـ Express للتطوير المحلي
الهوية	المصادقة، ثم تسجيل الدخول عبر مزوّدين خارجيين

ولكل محور ملف توثيق منفصل — docs/tailwindcss.md وdocs/mockapi.md وdocs/auth0.md وdocs/providerLogin.md — بدل ملف واحد متضخّم.

القرارات المعمارية

واجهة وهمية بـ Express بدل انتظار خادم حقيقي. خادم مصغّر في مجلد @api/ يقدّم بيانات ثابتة يجعل عمل الواجهة مستقلاً عن جاهزية الخلفية، ويجعل التجريب ممكناً دون اتصال أو مفاتيح خدمة.

التوليد الساكن كمسار نشر قائم بذاته. npm run generate يُخرج ملفات ساكنة في dist تُرفع إلى أي استضافة ساكنة. التمييز بينه وبين build مهمّ: الأول لا يحتاج إلى خادم Node عند التشغيل، والثاني يحتاجه.

التوثيق مجزّأ منذ البداية. ملف README واحد يضمّ كل شيء يصبح غير قابل للقراءة بعد الموضوع الثالث؛ فهرس مختصر يحيل إلى ملفات متخصصة يبقى صالحاً مع النمو.

النتيجة والدروس

المحصلة مرجع شخصي قابل لإعادة الاستخدام: مشروع Nuxt 3 جاهز مع تنسيق وواجهة وهمية ومسار مصادقة، وملاحظات تشرح لماذا يعمل كل جزء.

1. التعلّم بمشروع واحد يتراكم أفضل من عشرة مشاريع مهجورة. إضافة ميزة فوق السابقة تكشف التعارضات التي لا يظهرها مثال معزول.
2. توثيق الخطوة وقت أدائها جزء من التعلّم. ما لا يُكتب في حينه يُعاد اكتشافه من الصفر بعد شهر.

الروابط

• المستودع: github.com/i99dev/nuxt3-playground