components/
  ProductCard.vue     → <ProductCard />
  shop/
    ProductList.vue   → <ShopProductList />

# إنشاء مشروع Nuxt 3 جديد
npx nuxi@latest init megashop

# أو مع مدير حزم محدد
npx nuxi@latest init megashop --packageManager pnpm

# الخطوة 1: إنشاء المشروع
npx nuxi@latest init megashop

# الخطوة 2: الدخول إلى مجلد المشروع
cd megashop

# الخطوة 3: تثبيت التبعيات
npm install

# الخطوة 4: تشغيل خادم التطوير
npm run dev
# → Nuxt dev server running at http://localhost:3000

# Command executed successfully

{
  "name": "megashop",
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "dependencies": {
    "nuxt": "^3.12.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest"
  }
}

{
  "name": "megashop",
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "dependencies": {
    "nuxt": "^3.12.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest"
  }
}

megashop/
├── app.vue                    # المكون الجذري
├── nuxt.config.ts             # إعداد المشروع
├── pages/
│   ├── index.vue              # الصفحة الرئيسية
│   ├── products/
│   │   ├── index.vue          # قائمة المنتجات
│   │   └── [id].vue           # تفاصيل المنتج
│   ├── categories/
│   │   └── [slug].vue         # صفحة الفئة
│   ├── cart.vue               # سلة التسوق
│   └── about.vue              # صفحة حول
├── components/
│   ├── AppHeader.vue          # → <AppHeader />
│   ├── AppFooter.vue          # → <AppFooter />
│   └── product/
│       ├── ProductCard.vue    # → <ProductProductCard /> ①
│       └── ProductList.vue    # → <ProductProductList /> ①
├── composables/
│   ├── useCart.ts             # → مستورد تلقائيًا
│   └── usePriceFormat.ts      # → مستورد تلقائيًا
├── server/
│   └── api/
│       ├── products/
│       │   └── index.get.ts   # GET /api/products
│       └── cart/
│           └── index.post.ts  # POST /api/cart
├── layouts/
│   ├── default.vue            # التخطيط الافتراضي
│   └── sidebar.vue            # تخطيط الشريط الجانبي
├── middleware/
│   └── auth.ts                # وسيط مسمى
├── plugins/
│   └── stripe.client.ts       # إضافة من جانب العميل فقط
├── assets/
│   └── css/
│       └── main.css           # أنماط عامة
└── public/
    ├── favicon.ico
    └── robots.txt

Execution Successful

// nuxt.config.ts
export default defineNuxtConfig({
  # إعداد SSR العام
  ssr: true,

  # بيانات التطبيق
  app: {
    head: {
      title: 'MegaShop - Premium E-Commerce',
      meta: [
        { name: 'description', content: 'Millions of products, shipped worldwide' }
      ]
    }
  },

  # إعداد وقت التشغيل (أسرار جانب الخادم فقط)
  runtimeConfig: {
    # خاص - جانب الخادم فقط
    databaseUrl: process.env.DATABASE_URL,
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,
    # عام - مكشوف للعميل
    public: {
      apiBase: process.env.API_BASE || 'http://localhost:3000/api',
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY
    }
  },

  # الوحدات
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss'
  ],

  # إعداد بادئة مسار المكونات
  components: [
    { path: '~/components', pathPrefix: false }
  ]
})

// Execution Successful

// nuxt.config.ts - قواعد التصيير على مستوى المسار
export default defineNuxtConfig({
  routeRules: {
    # الصفحة الرئيسية: تصيير مسبق وقت البناء
    '/': { prerender: true },
    # قائمة المنتجات: ISR مع إعادة تحقق كل 60 ثانية
    '/products': { swr: 60 },
    # تفاصيل المنتج: ISR مع إعادة تحقق كل 3600 ثانية
    '/products/**': { swr: 3600 },
    # لوحة الإدارة: جانب العميل فقط
    '/admin/**': { ssr: false },
    # API: ترويسات CORS
    '/api/**': { cors: true }
  }
})

// Execution Successful

// composables/usePriceFormat.ts
// لا حاجة للاستيراد - مستورد تلقائيًا بواسطة Nuxt
export function usePriceFormat(price: number, currency: string = 'USD'): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency
  }).format(price)
}

// في أي مكون - استخدم مباشرة
// const formatted = usePriceFormat(2999.99) → "$2,999.99"

// Execution Successful

<!-- pages/index.vue -->
<template>
  <!-- جميع المكونات مستوردة تلقائيًا، لا حاجة لعبارات import -->
  <div>
    <AppHeader />
    <ProductCard :product="featured" />
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// جميع Composables مستوردة تلقائيًا
const { data: featured } = await useFetch('/api/products/featured')
const price = usePriceFormat(featured.value?.price || 0)
</script>

// Execution Successful

# ============================================
# تهيئة مشروع MegaShop
# إعداد كامل من الصفر إلى تشغيل خادم التطوير
# ============================================

# 1. إنشاء المشروع
npx nuxi@latest init megashop
cd megashop

# 2. تثبيت التبعيات الأساسية
npm install @pinia/nuxt @nuxtjs/tailwindcss

# 3. إنشاء هيكل المجلدات
mkdir -p pages/products pages/categories
mkdir -p components/product
mkdir -p composables
mkdir -p server/api/products server/api/cart
mkdir -p layouts
mkdir -p middleware
mkdir -p plugins
mkdir -p assets/css
mkdir -p public

# 4. تهيئة مستودع Git
git init
git add .
git commit -m "feat: initialize MegaShop with Nuxt 3"

# 5. تشغيل خادم التطوير
npm run dev