مقدّمة

في عالم تطوير واجهات الويب الحديث، نحتاج إلى قالب (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.