Nuxt 4 Starter Project

مشروع Nuxt 4 شامل مع Vuetify 3 و Tailwind CSS - جاهز للاستخدام في أي مشروع

✨ المميزات

• 🚀 Nuxt 4 - أحدث إصدار من Nuxt
• 🎨 Vuetify 3 - مكتبة UI components احترافية
• 🎯 Tailwind CSS - Utility-first CSS framework
• 🌍 i18n - دعم متعدد اللغات (عربي/إنجليزي)
• 🔐 Authentication - نظام مصادقة كامل مع middleware
• 📦 Pinia - إدارة الحالة مع persistence
• ✅ VeeValidate - التحقق من النماذج
• 🗺️ Maps - دعم Google Maps و Leaflet
• 📊 Charts - ECharts للرسوم البيانية
• 🎭 Animations - GSAP للحركات
• 🔄 API Client - Axios مع retry logic و error handling
• 🛡️ Error Handling - معالجة أخطاء شاملة
• 🔑 Permissions - نظام صلاحيات و أدوار
• 📝 TypeScript - دعم كامل لـ TypeScript
• 🎨 Dark Mode - دعم الوضع الداكن
• 📱 Responsive - تصميم متجاوب

📋 المتطلبات

• Node.js >= 18.x
• npm, pnpm, yarn, أو bun

🚀 البدء السريع

1. تثبيت المكتبات

npm install
# أو
pnpm install
# أو
yarn install

2. إعداد متغيرات البيئة

انسخ ملف .env.example إلى .env واملأ القيم:

cp .env.example .env

قم بتعديل القيم في ملف .env:

NUXT_PUBLIC_API_BASE_URL=https://api.example.com/api/v1
NUXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here
NUXT_PUBLIC_APP_NAME=My App
NUXT_PUBLIC_APP_URL=http://localhost:3002

3. تشغيل المشروع

npm run dev

المشروع سيعمل على http://localhost:3002

📁 هيكل المشروع

├── app/
│   ├── assets/          # الملفات الثابتة (صور، CSS)
│   ├── components/      # المكونات
│   │   ├── app/        # مكونات التطبيق
│   │   ├── base/       # مكونات أساسية
│   │   ├── form/      # مكونات النماذج
│   │   └── layout/    # مكونات التخطيط
│   ├── composables/    # Composables قابلة لإعادة الاستخدام
│   ├── config/         # ملفات الإعدادات
│   ├── layouts/        # التخطيطات
│   ├── middleware/     # Middleware للـ routes
│   ├── pages/          # الصفحات
│   ├── plugins/        # Plugins
│   ├── stores/         # Pinia stores
│   ├── utils/          # Utilities و constants
│   └── validations/    # قواعد التحقق
├── i18n/               # ملفات الترجمة
│   └── locales/
│       ├── ar.json
│       └── en.json
└── public/             # الملفات العامة

🛠️ الأدوات المتاحة

Composables

• useAPI() - للتعامل مع API requests
• useErrorHandler() - معالجة الأخطاء
• useLogger() - نظام logging
• usePermissions() - إدارة الصلاحيات والأدوار
• useMetaTags() - إدارة meta tags

Stores

• useAuthStore() - إدارة المصادقة
• useAppStore() - إعدادات التطبيق
• useGlobalStore() - حالة عامة

Middleware

• auth.ts - حماية routes تتطلب مصادقة

📝 Scripts المتاحة

# التطوير
npm run dev

# البناء للإنتاج
npm run build

# معاينة البناء
npm run preview

# توليد موقع ثابت
npm run generate

🔧 الإعدادات

API Configuration

يمكنك تعديل إعدادات API في app/config/runtime.config.ts أو عبر متغيرات البيئة.

i18n

اللغات المدعومة:

• العربية (ar)
• الإنجليزية (en)

يمكنك إضافة لغات جديدة في app/config/i18n.config.ts

Theme

المشروع يدعم الوضع الفاتح والداكن. يمكن التبديل عبر useAppStore().switchMode()

🚨 معالجة الأخطاء

المشروع يحتوي على نظام شامل لمعالجة الأخطاء:

• Global Error Handler - يلتقط الأخطاء غير المعالجة
• API Error Handling - معالجة أخطاء API مع retry logic
• Validation Errors - معالجة أخطاء التحقق من النماذج

🔐 الأمان

• ✅ متغيرات البيئة للمفاتيح الحساسة
• ✅ Middleware للمصادقة
• ✅ نظام صلاحيات وأدوار
• ✅ حماية من XSS و CSRF

📦 المكتبات المستخدمة

Core

• Nuxt 4
• Vue 3
• Pinia
• Vue Router

UI

• Vuetify 3
• Tailwind CSS
• @mdi/font

Utilities

• Axios
• VeeValidate
• VueUse
• GSAP

Features

• @nuxtjs/i18n
• @nuxt/image
• @nuxtjs/seo
• nuxt-echarts
• vue3-google-map
• leaflet

🤝 المساهمة

نرحب بمساهماتك! يرجى:

1. Fork المشروع
2. إنشاء branch للميزة الجديدة
3. Commit التغييرات
4. Push إلى branch
5. فتح Pull Request

📄 الترخيص

هذا المشروع متاح للاستخدام الحر.

👤 المؤلف

Ahmed Niazy Elsolya

🙏 شكر خاص

شكراً لجميع المساهمين والمكتبات مفتوحة المصدر التي جعلت هذا المشروع ممكناً.

ملاحظة: تأكد من تحديث ملف .env قبل البدء في التطوير!