Install
pnpm add @nuxt/ui tailwindcssلمن يناسب
إن كنت تبني واجهة Nuxt وتريد UI Vue جاهزة بدل تجميع مكوّنات ميسّرة من الصفر، فهذا المستودع أنسب. يجمع Reka UI وTailwind CSS وTailwind Variants لواجهات معقّدة وميسّرة وعالية الأداء. المصادر أعلى التيار ذات الصلة:
https://reka-ui.com/
https://tailwindcss.com/
https://www.tailwind-variants.org/
تحتاج مشروع Nuxt يستطيع تغيير nuxt.config وتقبل تثبيت الاعتمادات بـ pnpm. من يريد فقط أن يساعد وكيل ترميز في تغيير مكوّنات أو سمات أو اختبارات يجب أن يقرأ أولاً AGENTS.md في المستودع. لا يكتب منتج Agent معيّنًا كهدف وحيد مدعوم؛ يقول فقط إن all AI coding agents ستلتقطه تلقائيًا.
أنهِ أول محاولة في 3 دقائق
أمر التثبيت الرسمي مكتوب في الصفحة هكذا:
pnpm add @nuxt/ui tailwindcss
هذا يغيّر اعتمادات المشروع؛ ليس نظرة للقراءة فقط. أكّد أولاً أن الدليل الحالي هو تطبيق Nuxt لديك وأن الجهاز فيه pnpm ثم نفّذ. بعد التثبيت اكتب الوحدة في الإعداد. المقتطف يعطي:
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
يشترط وجود مدخل CSS ~/assets/css/main.css لكنه لا يكتب محتوى ذلك الملف. لا تخترع @import ولا استعمال المكوّنات. إشارة النجاح: الاعتماد مثبّت وmodules يظهر @nuxt/ui والتطبيق يقلع بطريقتك الحالية دون خطأ لغياب هذه الوحدة. إن بدأ Agent إضافة أمثلة أزرار غير موجودة في المقتطف أو تغيير رموز السمة فتوقف أولاً.
فحص أقل مخاطرة: افتح
https://github.com/nuxt/ui/blob/v4/AGENTS.md
اجعل Agent يشرح فقط بنية المكوّنات أو اصطلاحات السمة دون تغيير ملفات بعد.
حالات استخدام
الحالة 1: وصّل v4 في تطبيق Nuxt. ثبّت @nuxt/ui وtailwindcss بأمر pnpm أعلاه ثم سجّل وحدة @nuxt/ui وأشِر إلى ~/assets/css/main.css. الصفحة لا تكتب أوامر npm/yarn مكافئة ولا كيف تستورد أول مكوّن في ملف Vue واحد. لذا تؤكد فقط هاتين الخطوتين: الاعتماد وتسجيل الوحدة. ماذا تكتب في ملف CSS وأي مكوّن تضعه في صفحة خارج هذا المقتطف؛ يجب الرجوع إلى وثائق أو مصدر محلي لديك أصلًا، ولا تتظاهر بأن هذا النص أعطاها.
الحالة 2: اجعل وكيل ترميز يعمل وفق قواعد المستودع. AGENTS.md يعطي دليل مساهمة لمساعدي الذكاء الاصطناعي، يغطي بنية المكوّنات وأنماط السمة واصطلاحات الاختبار وإرشادات التوثيق، ويُلتقط تلقائيًا. يجب أن تكون المهمة مقارنة للقراءة فقط، مثل «وفق AGENTS.md افحص هل بنية/سمة/اختبارات هذا المكوّن انحرفت». لا يكتب أوامر اختبار ملموسة ولا طريقة نشر موقع توثيق. لذا في المرة الأولى لا تجعل Agent يعيد كتابة التوثيق دفعة أو يضيف ملفات اختبار؛ اجعله أولاً يشير إلى الفقرات الساندة والمسارات التي سيغيّرها.
حدود الاستخدام
ما تنظر إليه الآن هو فرع v4. Nuxt UI v3 في
https://github.com/nuxt/ui/tree/v3
وv2 في
https://github.com/nuxt/ui/tree/v2
لا تُسقط أسماء وحدات أو أدلة أو كتابة سمة من فروع قديمة على v4. الصفحة لا تكتب جدول ترحيل من v4 إلى v3.
مسار التثبيت هو pnpm add @nuxt/ui tailwindcss. لا تضع بجانبه أمر مدير حزم آخر. Reka UI وTailwind Variants مكتوبان كمصدر قدرة لا كمثبّت ثانٍ.
في المرة الأولى توقف عند تثبيت الاعتمادات أو تسجيل الوحدة أو قراءة AGENTS.md فقط. أي تغيير لمصدر مكوّن أو إضافة اختبارات أو سمة أو إعادة كتابة مدخل CSS يجب أن يجعل Agent يعيد أولاً الملفات التي سيغيّرها؛ تؤكد أنت ثم تتابع.