第1回：「実務で活かすNuxt3の基礎 – プロジェクトセットアップから基本構造まで」

# voltaのインストール（macOS / Linux）
curl https://get.volta.sh | bash

# Windowsの場合は、インストーラーをダウンロードして実行
# https://docs.volta.sh/guide/getting-started

# Node.jsのインストール
volta install node@20

# プロジェクトでのNode.jsバージョン固定
volta pin node@20

# バージョン確認
node -v

# プロジェクトの作成
npx nuxi init my-nuxt-app

# ディレクトリに移動
cd my-nuxt-app

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

my-nuxt-app/
├── .nuxt/           # ビルドファイル（自動生成）
├── assets/          # プリプロセスが必要なアセット
├── components/      # Vueコンポーネント
├── composables/     # 再利用可能な処理
├── layouts/         # レイアウトテンプレート
├── pages/           # ページコンポーネント
├── plugins/         # Nuxtプラグイン
├── public/          # 静的ファイル
├── server/          # サーバーサイドの処理
└── utils/           # ユーティリティ関数

pages/
├── index.vue        # トップページ（/）
├── about.vue        # アバウトページ（/about）
└── users/
    ├── index.vue    # ユーザー一覧（/users）
    └── [id].vue     # ユーザー詳細（/users/[id]）

components/
├── common/          # 汎用的なコンポーネント
│   ├── Button.vue
│   └── Input.vue
├── layout/          # レイアウト関連のコンポーネント
│   ├── Header.vue
│   └── Footer.vue
└── features/        # 機能単位のコンポーネント
     └── users/
        ├── UserCard.vue
        └── UserList.vue

composables/
├── useAuth.ts       # 認証関連のロジック
├── useApi.ts        # API通信の共通処理
└── useForm.ts       # フォーム関連の共通処理

assets/
├── styles/          # スタイルファイル
│   ├── main.scss
│   └── variables.scss
└── images/          # 画像ファイル
     └── logo.svg

export default defineNuxtConfig({
  // TypeScriptの厳格モードを有効化
  typescript: {
    strict: true,
    shim: false,
  },

  // モジュールの設定
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
  ],

  // アプリケーションの基本設定
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
    },
  },

  // 開発時の設定
  devtools: { enabled: true }
})

# 必要なパッケージのインストール
npm install -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier prettier

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
    'vue/require-default-prop': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
    // プロジェクトに応じてカスタマイズ
  },
}

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "endOfLine": "auto"
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "nuxt-windicss"
    ]
  }
}

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: volta-cli/action@v4
      - name: Install dependencies
        run: npm ci
      - name: Lint
        run: npm run lint
      - name: Type check
        run: npm run typecheck
      - name: Test
        run: npm run test

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.associations": {
    "*.css": "postcss"
  }
}

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens",
    "mikestead.dotenv"
  ]
}

<script setup lang="ts">
const title = ref('Welcome to Nuxt3')
const description = ref('Modern Vue.js Framework for Production')
</script>

<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-4xl font-bold mb-4">{{ title }}</h1>
    <p class="text-gray-600 mb-8">{{ description }}</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <AppCard title="Features">
        <ul class="list-disc list-inside">
          <li>File-based routing</li>
          <li>Auto-imports</li>
          <li>Server-side rendering</li>
        </ul>
      </AppCard>
      
      <AppCard title="Getting Started">
        <p>Start building your next Vue.js application with Nuxt 3.</p>
        <AppButton @click="navigateToGuide">
          View Guide
        </AppButton>
      </AppCard>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
}

defineProps<Props>()
</script>

<template>
  <div class="bg-white shadow rounded-lg p-6">
    <h2 class="text-xl font-semibold mb-4">{{ title }}</h2>
    <slot />
  </div>
</template>

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary'
})
</script>

<template>
  <button
    :class="[
      'px-4 py-2 rounded-md transition-colors',
      variant === 'primary'
        ? 'bg-blue-500 hover:bg-blue-600 text-white'
        : 'bg-gray-200 hover:bg-gray-300 text-gray-800'
    ]"
  >
    <slot />
  </button>
</template>

// グローバルスタイル
@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }
}

// カスタムユーティリティ
@layer utilities {
  .container {
    @apply max-w-7xl mx-auto;
  }
}

// エラー
// Component 'AppButton' has no exported component declaration.
<AppButton>Click me</AppButton>

// エラー
// Property 'value' does not exist on type 'Ref<undefined>'
const value = ref()
value.value = 'test'

// 正しい型定義
const value = ref<string>('')
// または
const value = ref<string | undefined>()

# package.jsonのscriptsを修正
{
  "scripts": {
    "build": "NODE_OPTIONS=--max-old-space-size=4096 nuxt build"
  }
}

// デバッグモードの有効化
export default defineNuxtConfig({
  devtools: {
    enabled: true,
    timeline: true
  }
})

// server/api/example.ts
export default defineEventHandler((event) => {
  console.log('Server-side log:', event)  // Node.jsのコンソールに出力
})