テンプレート一覧に戻る
Nuxt 3 + Vue 3 + TypeScript
Nuxt 3 + Vue 3 Composition API + TypeScript のフルスタック向けCLAUDE.md。SSR/SSG対応のモダンなVue開発に最適です。
中級nuxtvuetypescript
CLAUDE.md
# プロジェクト名
Nuxt 3 + Vue 3 + TypeScript で構築されたWebアプリケーション。
## 技術スタック
- **フレームワーク**: Nuxt 3.15+
- **言語**: TypeScript 5.x + Vue 3 Composition API
- **スタイリング**: UnoCSS / Tailwind CSS v4
- **状態管理**: Pinia
- **テスト**: Vitest + @vue/test-utils
- **パッケージマネージャ**: pnpm
## コマンド
| コマンド | 用途 |
|---------|------|
| `pnpm dev` | 開発サーバー起動 (localhost:3000) |
| `pnpm build` | プロダクションビルド |
| `pnpm generate` | 静的サイト生成 |
| `pnpm lint` | ESLint実行 |
| `pnpm test` | Vitest実行 |
## ディレクトリ構造
| パス | 役割 |
|-----|------|
| `pages/` | ファイルベースルーティング |
| `components/` | Vue コンポーネント(自動インポート) |
| `composables/` | Composition API ユーティリティ |
| `server/` | Nitro サーバールート・API |
| `stores/` | Pinia ストア |
| `layouts/` | レイアウトコンポーネント |
## コーディング規約
- Composition API(`<script setup>`)を使用
- コンポーネント名はPascalCase、ファイル名もPascalCase
- composableは `use` プレフィックス必須
- 自動インポートを活用し、明示的importは最小限に
- サーバーAPIは `server/api/` に配置
- Piniaストアは Setup Store 形式を推奨
## Git規約
- ブランチ: `feature/`, `fix/`, `chore/`
- コミットメッセージ: Conventional Commits形式