Ahmed-Niazy Nuxt 3 Starter – Everything You Need Out of the Box

مقدّمة

في عالم تطوير واجهات الويب الحديث، نحتاج إلى قالب (starter) يجمع أهم الأدوات الضرورية، بدلًا من البدء من الصفر في كل مشروع. حزمة ahmed-niazy صُمّمت خصيصًا لتكون نقطة انطلاق قوية لمشاريع Nuxt 3، حيث تضم:

• دعم الترجمة (i18n) بالعربية والإنجليزية.
• تحسين محركات البحث (SEO) وإنتاج sitemap.xml وrobots.txt تلقائيًا.
• دعم PWA مع Service Worker وكاش الموارد.
• إدارة الحالة بـ Pinia مع ميزة الاحتفاظ بالحالة (persist).
• فحص جودة الكود عبر ESLint وتكوين Tailwind CSS.
• دمج Vuetify 3 مع نظام ثيمات Light/Dark قابل للتخصيص.
• مكتبة ألوان متقدمة لإدارة الثيمات.
• تكامل مع مكتبات الرسوم البيانية (ECharts)، الخرائط (Google Maps وLeaflet)، والتحقق من النماذج (Vee Validate + Yup).
• دعم GSAP للتحرّكات، و@nuxt/image لتحسين الصور.

---

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

1. توفير الوقت: إعدادات جاهزة لجميع الإضافات الشائعة.
2. مرونة التخصيص: تعطيل أو تعديل أي مكتبة بسهولة من nuxt.config.ts.
3. ثيمات Light/Dark: تبديل تلقائي أو يدوي بين الوضعين.
4. إدارة الحالة: حفظ الحالة في localStorage للعودة بعد إعادة التحميل.
5. تحسين الأداء: ضغط الصور وتحميل الخطوط بكفاءة.
6. تجربة مستخدم غنية: خرائط تفاعلية ورسوم متحركة سلسة وتنبيهات فورية.

---

التثبيت

npm install ahmed-niazy

ثم في ملف nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['ahmed-niazy'],
  ahmedNiazy: {
    i18n: { locales: ['ar', 'en'], defaultLocale: 'ar' },
    vuetify: {
      theme: {
        defaultTheme: 'light',
        themes: {
          light: { colors: { primary: '#1976D2', secondary: '#424242' /*...*/ } },
          dark:  { colors: { primary: '#2196F3', secondary: '#FFCDD2' /*...*/ } }
        }
      }
    },
    colors: {
      defaultPalette: 'material',
      palettes: { material: ['#F44336', ...], pastel: ['#FFB3BA', ...] }
    }
  }
});

---

هيكل المشروع

.
├── assets/styles/_variables.scss   # متغيرات الألوان
├── components/                     # مكوّنات Vue
├── composables/                    # أدوات VueUse
├── layouts/                        # تخطيطات
├── middleware/                     # Middlewares
├── pages/                          # صفحات Vue
├── plugins/                        # axios, toast, carousel, leaflet, echarts, gsap
├── utils/                          # validation.js (Yup + Vee Validate)
├── public/                         # favicon, manifest.json
├── nuxt.config.ts                  # إعدادات Nuxt مع ahmed-niazy
└── package.json

---

مثال عملي: تبديل الثيم

في أي مكوّن Vue:

<template>
  <button @click="toggleTheme">{{ isDark ? 'تبديل إلى الوضع الفاتح' : 'تبديل إلى الوضع الداكن' }}</button>
</template>

<script setup lang="ts">
import { useTheme } from 'vuetify';
import { computed } from 'vue';
const theme = useTheme();
const isDark = computed(() => theme.global.current.value.dark);
function toggleTheme() {
  theme.global.name.value = isDark.value ? 'light' : 'dark';
}
</script>

---

نظرة على الملفات المهمة

• assets/styles/_variables.scss: ألوان ثيم Light & Dark.
• plugins/axios.js: إعداد Axios.
• plugins/vue-toastification.js: تسجيل التنبيهات.
• plugins/vue3-carousel.js: دوار الصور.
• plugins/leaflet.js: إعداد Leaflet.
• plugins/echarts.js: تسجيل مكون الإحصائيات.
• plugins/gsap.js: تحضيرات GSAP.
• utils/validation.js: قواعد التحقق (Yup + Vee Validate).

---

الخاتمة

بفضل ahmed-niazy، أصبح إطلاق مشروع Nuxt 3 أسرع وأسهل، مع تغطية شاملة للميزات الأساسية والإضافية.

للمزيد، زر

---

Introduction

In modern web UI development, starting from scratch is time-consuming. The ahmed-niazy package provides a starter kit for Nuxt 3 with:

• i18n support (Arabic & English)
• SEO enhancements: auto meta tags, sitemap.xml, robots.txt
• PWA setup with Service Worker and caching
• Pinia state management with persistence
• ESLint, Tailwind CSS ready-to-use
• Vuetify 3 integration with customizable Light/Dark themes
• Advanced color library for consistent theming
• Integrations: ECharts, Google Maps & Leaflet, Vee Validate + Yup
• GSAP for animations and @nuxt/image for responsive images

---

Key Features

1. Time-saving: preconfigured popular modules.
2. High flexibility: disable or customize any integration.
3. Theme switching: automatic or manual Light/Dark.
4. State persistence: stored in localStorage.
5. Performance: image optimization and efficient font loading.
6. Enhanced UX: interactive maps, smooth animations, toasts.

---

Installation

npm install ahmed-niazy

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['ahmed-niazy'],
  ahmedNiazy: {
    i18n: { locales: ['ar','en'], defaultLocale: 'en' },
    vuetify: { theme: { defaultTheme: 'light', themes: { light:{colors:{...}}, dark:{colors:{...}} } } },
    colors: { defaultPalette:'material', palettes:{ material:[...], pastel:[...] } }
  }
});

---

Project Structure

.
├── assets/styles/_variables.scss
├── components/
├── composables/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── utils/ (validation.js)
├── public/
├── nuxt.config.ts
└── package.json

---

Practical Example: Theme Toggle

<template>
  <button @click="toggleTheme">{{ isDark ? 'Light Mode' : 'Dark Mode' }}</button>
</template>

<script setup lang="ts">
import { useTheme } from 'vuetify';
import { computed } from 'vue';
const theme = useTheme();
const isDark = computed(() => theme.global.current.value.dark);
function toggleTheme() { theme.global.name.value = isDark.value ? 'light' : 'dark'; }
</script>

---

Key Files

• assets/styles/_variables.scss: theme color definitions.
• plugins/axios.js, vue-toastification.js, vue3-carousel.js, leaflet.js, echarts.js, gsap.js.
• utils/validation.js: form validation rules.

---

Conclusion

With ahmed-niazy, launch Nuxt 3 projects faster, fully equipped with essential and advanced features.

Visit for more.