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

# コマンド実行成功

{
  "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              # Aboutページ
├── 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

実行成功

// nuxt.config.ts
export default defineNuxtConfig({
  // グローバルSSR設定
  ssr: true,

  // アプリメタデータ
  app: {
    head: {
      title: 'MegaShop - Premium E-Commerce',
      meta: [
        { name: 'description', content: '数百万の商品を世界配送' }
      ]
    }
  },

  // ランタイム設定 (サーバー専用シークレット)
  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 }
  ]
})

// 実行成功

// 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 }
  }
})

// 実行成功

// 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"

// 実行成功

<!-- pages/index.vue -->
<template>
  <!-- すべてのコンポーネントが自動インポート, import文不要 -->
  <div>
    <AppHeader />
    <ProductCard :product="featured" />
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// すべてのコンポーザブルが自動インポート
const { data: featured } = await useFetch('/api/products/featured')
const price = usePriceFormat(featured.value?.price || 0)
</script>

// 実行成功

# ============================================
# 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