المهارات nuxt
📦
يحتاج المطورون إلى إرشادات حول أنماط Nuxt 4 لمسارات الخادم والتوجيه القائم على الملفات والمكونات الوسيطة والإضافات والتكوين. توفر هذه المهارة وثائق مرجعية متدرجة مع أحدث اصطلاحات وأمثلة Nuxt.
يدعم: Claude Codex Code(CC)
1
تنزيل ZIP المهارة
2
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
3
فعّل وابدأ الاستخدام
اختبرها
استخدام "nuxt". Create a Nuxt 4 server route with Zod validation
النتيجة المتوقعة:
- Create the route file: server/api/users.ts
- Import Zod and define input schema with z.object()
- Use readBody() or getQuery() to get input
- Validate with schema.parse() and return validation errors
- Return typed response with proper status codes
استخدام "nuxt". Set up global authentication middleware
النتيجة المتوقعة:
- Create middleware/auth.global.ts
- Use defineNuxtRouteMiddleware() for type safety
- Check auth state from store or session
- Return navigateTo() for redirects (not router.push())
- Export default function for Nuxt 4 compatibility
التدقيق الأمني
آمنv1 • 2/9/2026
Documentation-only skill containing markdown reference files for Nuxt 4+ development. All static findings are false positives from markdown code examples. No executable code, network calls, or credential access.
8
الملفات التي تم فحصها
2,074
الأسطر التي تم تحليلها
2
النتائج
1
إجمالي عمليات التدقيق
عوامل الخطر
🌐 الوصول إلى الشبكة (5)
📁 الوصول إلى نظام الملفات (1)
تم تدقيقه بواسطة: claude
درجة الجودة
45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
35
المجتمع
100
الأمان
91
الامتثال للمواصفات
ماذا يمكنك بناءه
إنشاء نقاط نهاية API
بناء مسارات الخادم مع التحقق من الصحة ودعم WebSocket وSSE باستخدام مساعدي h3 وأنماط Nitro.
إعداد التوجيه والمكونات الوسيطة
تكوين التوجيه القائم على الملفات ومجموعات المصادقة والمكونات الوسيطة للتنقل وحراس التنقل.
تكوين مشاريع Nuxt
إعداد nuxt.config.ts مع الوحدات وتكوين وقت التشغيل والاستيرادات التلقائية وطبقات المشروع.
جرّب هذه الموجهات
إنشاء مسار خادم
أحتاج إلى إنشاء مسار خادم Nuxt 4 على /api/users الذي يُرجع قائمة المستخدمين مع التحقق من الصحة. قم بتحميل references/server.md لأنماط التحقق من h3 وبنية المسار الصحيحة.
إضافة المكونات الوسيطة للمسار
أريد إضافة مكون وسيطي للمصادقة يعيد توجيه المستخدمين غير المصادق عليهم. قم بتحميل references/middleware-plugins.md لرؤية أنماط Nuxt 4 للمكونات الوسيطة والمكونات الوسيطة العامة مقابل المسماة.
تكوين تكوين وقت التشغيل
كيف أقوم بتكوين runtimeConfig في nuxt.config.ts للوصول إلى متغيرات البيئة على جانب الخادم؟ اعرض أنماط references/nuxt-config.md للتكوين الخاص والعام.
استخدام قوالب Nuxt القابلة للاستخدام
أحتاج إلى إجراء طلب جلب في صفحة Nuxt الخاصة بي. قم بتحميل references/nuxt-composables.md لرؤية كيفية عمل useFetch واعتبارات SSR الصحيحة.
أفضل الممارسات
- استخدم الصادرات المسماة للمكونات الوسيطة للمسار بدلاً من العامة إلا إذا كانت عامة حقاً
- أعد navigateTo() من المكونات الوسيطة، لا تستخدم router.push() مباشرة
- تحقق من صحة مدخلات API باستخدام مخطط Zod على مستوى معالج المسار
- استخدم useFetch() مع مفاتيح صحيحة لجلب البيانات على الخادم وتخزينها مؤقتاً
تجنب
- استخدام router.push() من Vue 3 بدلاً من navigate() في المكونات الوسيطة
- تجاهل التحقق من صحة المدخلات على مسارات الخادم
- خلط الكود الخاص بالعميل والخادم فقط بدون استخدام proper runtimeConfig
- عدم استخدام اللاحقة .global.ts للمكونات الوسيطة العامة
الأسئلة المتكررة
ما الفرق بين المكونات الوسيطة المسماة والعامة في Nuxt 4؟
المكونات الوسيطة المسماة تعمل فقط عند تطبيقها صراحةً عبر definePageMeta(). يجب أن تستخدم المكونات الوسيطة العامة اللاحقة .global.ts وتعمل على كل تغيير مسار. استخدم العامة فقط عند الحاجة حقاً عبر جميع المسارات.
كيف أتحقق من صحة أجسام طلبات API في مسارات خادم Nuxt؟
استخدم Zod مع readBody() لطلبات POST/PUT. استورد z، وحدد مخططاً باستخدام z.object()، ثم استدعي schema.parse(body) للتحقق من الصحة. أرجع حالة 400 مع الأخطاء إذا فشل التحقق.
ما هي الطريقة الصحيحة للتعامل مع متغيرات البيئة؟
استخدم runtimeConfig في nuxt.config.ts. المفاتيح الخاصة (الخادم فقط) تستخدم process.env.API_SECRET. المفاتيح العامة (التي يمكن الوصول إليها من العميل) تستخدم process.env.PUBLIC_API_BASE. لا تُعرّض المفاتيح الخاصة أبداً لbundle العميل.
كيف أستخدم قوالب Nuxt القابلة للاستخدام مقابل قوالب Vue؟
قوالب Nuxt القابلة للاستخدام مستوردة تلقائياً من ~/composables أو الحزم. استخدم القوالب الخاصة بـ Nuxt مثل useFetch وuseRequestURL وuseRuntimeConfig. للأنماط العامة لـ Vue، استخدم مهارة Vue مع أمثلة VueUse.
ما هي بنية المشروع الموصى بها لـ Nuxt 4؟
البنية القياسية: pages/ وcomponents/ وcomposables/ وmiddleware/ وplugins/ وserver/ وutils/ وassets/. استخدم app/ للدلائل على مستوى التطبيق. ضع nuxt.config.ts في جذر المشروع.
كيف أنشئ مجموعات مسارات في Nuxt 4؟
لف أسماء المجلدات بين أقواس مثل (admin)/. هذا ينشئ مجموعة مسارات بدون إضافة جزء للمسار. مفيد لتجميع المسارات مع التخطيطات المشتركة أو المكونات الوسيطة.