Nuxt 4 ベースの管理画面テンプレートです。
新人やジュニア開発者が、迷わず開発を始められるように作っています。
- 管理画面の画面をすぐに作り始められる
- 多言語対応の画面を試せる
- ダミー API を使って画面開発を進められる
- 設定画面や一覧画面の土台を再利用できる
pnpm install
pnpm dev開発サーバーが起動したら、ブラウザで表示された URL を開いてください。
- AI を使って開発する場合は、作業を始める前に必ず
pnpm installを実行してください。 - このリポジトリには agent skill のセットアップが含まれています。
- Nuxt の開発を AI に依頼するときは、Nuxt skill を使うのがおすすめです。
- Nuxt は
.envの値を自動で読み込みます。 NUXT_XXXはサーバー側の設定に使います。NUXT_PUBLIC_XXXはクライアント側でも使う公開設定に使います。- サンプルは
.env.exampleを見てください。
| コマンド | 使い道 |
|---|---|
pnpm dev |
開発サーバーを起動する |
pnpm build |
本番用にビルドする |
pnpm preview |
ビルド結果を確認する |
pnpm typecheck |
型エラーを確認する |
| 場所 | ここでやること |
|---|---|
app/pages/ |
ページを作る |
app/components/ |
部品を作る |
server/api/ |
ダミー API を編集する |
i18n/locales/ |
文言を変更する |
nuxt.config.ts |
全体設定を変える |
- 初期セットアップ:
docs/getting-started.md - フォルダ構成:
docs/project-structure.md - カスタマイズ方法:
docs/customizing.md - AI コーディング用 PRD サンプル:
docs/prd/sample-prd-ai-coding.md
- パッケージマネージャーは
pnpm前提です。 - このテンプレートにはサンプル文言とサンプルデータが入っています。
- 本番利用前に、ブランド名や API 実装は差し替えてください。