<- Go Back

🚀 nuxt4-elsolya: مكتبة Nuxt 4 متكاملة بـ +130 مكون جاهز

Ahmed Niazy

Ahmed Niazy

2025-09-05T14:34:49Z

2 min read

🚀 nuxt4-elsolya – مكتبة Nuxt 4 متكاملة لبناء تطبيقات ويب حديثة

لو بتطور بتطبيقات Nuxt 4، غالبًا هتواجه تحديات زي:

  • إنشاء مكونات UI أساسية (Inputs, Buttons, Forms)
  • إعداد تعدد اللغات ودعم RTL / LTR
  • دمج الخرائط والمخططات
  • التحقق من النماذج وإدارة الحالة

علشان كده، اتعملت مكتبة nuxt4-elsolya كحل شامل يديك كل اللي محتاجه من مكونات جاهزة، أدوات متقدمة، وتصميم متجاوب في مكان واحد.

✨ المميزات الرئيسية

  • 🧩 أكثر من 130 مكون جاهز لتطوير واجهات المستخدم
  • 🌍 دعم العربية والإنجليزية مع اتجاه تلقائي للنصوص RTL/LTR
  • 🎨 نظام تصميم متكامل: ألوان أساسية وثانوية، وضع مظلم/فاتح، أنيميشن سلس
  • 📊 تكامل مع Google Maps, Leaflet, ECharts, YouTube
  • ⚙️ أدوات تطوير أساسية: Pinia (state management)، VeeValidate (form validation)، Axios، VueUse
  • 🚀 تحسين الأداء: Lazy Loading, Code Splitting, Tree Shaking, Nuxt Image
  • 🔒 أمان: تحقق من الملفات، حماية ضد XSS
  • 🌟 مميزات إضافية: SEO جاهز، PWA Ready، TypeScript Support

📦 التثبيت 

npm i nuxt4-elsolya
Enter fullscreen mode Exit fullscreen mode

🖼️ أمثلة سريعة

إدخال نص: 

<BaseInput 
  v-model="name" 
  label="الاسم الأول" 
  required 
  validation="required|min:2"
/>
Enter fullscreen mode Exit fullscreen mode

زر: 

<BaseButton
  label="button.filled"
  color="primary"
  size="large"
  @click="handleClick"
/>
Enter fullscreen mode Exit fullscreen mode

تقييم بالنجوم: 

<BaseStar 
  v-model="rating" 
  :label="$t('star.label')"
  name="rating"
/>
Enter fullscreen mode Exit fullscreen mode

📚 التوثيق

  • توثيق كامل بالعربية والإنجليزية
  • أكواد جاهزة وسهلة الاستخدام
  • أمثلة تفاعلية لكل المكونات

📄 nuxt4-elsolya على NPM

🔑 كلمات مفتاحية للبحث (SEO):
Nuxt 4 مكتبة, Nuxt 4 مكونات جاهزة, مكتبة Nuxt بالعربية, تطوير Nuxt, Vue 3 Nuxt components, مكتبة تصميم Nuxt, Nuxt UI Library

🚀 nuxt4-elsolya – Complete Nuxt 4 Component & UI Library

When building with Nuxt 4, developers often need to:

  • Create reusable UI components (Inputs, Buttons, Forms)
  • Implement multilingual support (RTL & LTR)
  • Integrate Google Maps, charts, and videos
  • Manage forms & validation
  • Optimize performance for SEO & PWA

That’s why I created nuxt4-elsolya: an all-in-one Nuxt 4 library with 130+ ready-to-use components, a modern design system, and advanced integrations.

✨ Key Features

  • 🧩 130+ reusable components (Inputs, Buttons, File Upload, MultiSelect, Stars Rating, Toggles…)
  • 🌍 Full multilingual support (Arabic & English) with automatic RTL/LTR
  • 🎨 Design system with color palettes, dark/light mode, animations
  • 📊 Integrations: Google Maps, Leaflet, ECharts, YouTube
  • ⚙️ Developer tools: Pinia, VeeValidate, Axios, VueUse, Toast Notifications
  • 🚀 Performance: Lazy Loading, Tree Shaking, Code Splitting, Nuxt Image
  • 🔒 Security: file validation, XSS protection
  • 🌟 Extra: SEO Friendly, PWA Ready, TypeScript Support

📦 Installation 

npm i nuxt4-elsolya
Enter fullscreen mode Exit fullscreen mode

🖼️ Quick Examples

Input Field: 

<BaseInput 
  v-model="name" 
  label="First Name" 
  required 
  validation="required|min:2"
/>
Enter fullscreen mode Exit fullscreen mode

Button: 

<BaseButton
  label="button.filled"
  color="primary"
  size="large"
  @click="handleClick"
/>
Enter fullscreen mode Exit fullscreen mode

Star Rating: 

<BaseStar 
  v-model="rating" 
  :label="$t('star.label')"
  name="rating"
/>
Enter fullscreen mode Exit fullscreen mode

📚 Documentation

  • Full documentation in both Arabic & English
  • Ready-to-use code snippets
  • Interactive examples

📄 nuxt4-elsolya on NPM

🔑 SEO Keywords:
Nuxt 4 UI Library, Nuxt 4 Components, Vue 3 Nuxt UI, Multilingual Nuxt, Nuxt 4 Open Source, Nuxt Design System, PWA Ready Nuxt Library