Nuxt でフルスタックのダッシュボードアプリを一から作ろうとすると、認証・データベース・UIコンポーネントの初期設定だけで数時間かかることがある。Dennis Adriaansen が公開した nuxt-crud の CLI はその問題を一掃する。5つのコマンドで Nuxt + Nuxt UI + Drizzle ORM + Better Auth の構成を自動生成し、NuxtHub 経由で Cloudflare または Vercel にそのままデプロイできる。

この記事でわかること:

  • nuxt-crud CLI が何をするツールか
  • DashboardStack Init の5ステップの内容
  • Better Auth と NuxtHub がどう連携するか
  • 導入コマンドと使い方
GitHub - dennisadriaans/nuxt-crud: Generate files for your Nuxt backend like you did in Laravel back in the days.
Generate files for your Nuxt backend like you did in Laravel back in the days. - dennisadriaans/nuxt-crud
GitHub

「また設定から始めるのか」という問題

新しいダッシュボードプロジェクトを立ち上げるとき、毎回同じ作業が繰り返される。Nuxt の初期化、UIライブラリの追加、Drizzle ORM のスキーマ作成、認証ライブラリのセットアップ、そしてCRUDエンドポイントの雛形生成。Laravel では artisan make:model や artisan make:resource で一瞬終わるが、Nuxt にはそれに相当するツールが長らくなかった。

nuxt-crud はその空白を埋めるために作られた CLI ツールだ。Drizzle ORM のモデルからバックエンドのエンドポイント・バリデーション・レスポンス整形までをまとめて生成する。

DashboardStack Init の5ステップ

Dennisが公開したデモでは、以下の手順を順番に実行するだけで全体の骨格が完成する。

1. Nuxt を初期化する

npm create nuxt@latest my-app

Nuxt 4 の最小構成からスタートする。

2. Nuxt UI を追加する

npx nuxi module add ui

Nuxt UI は 125 以上のコンポーネントを MIT ライセンスで提供するオフィシャルの UI ライブラリだ（Nuxt 4 からすべて無料）。ボタン・テーブル・モーダルなどダッシュボードで使う部品がひととおり揃っている。

3. データベースを自動生成する

npx nuxt-crud make:database

Drizzle ORM のセットアップファイルを自動生成する。NuxtHub を使えば Cloudflare D1（SQLite）に接続でき、追加設定なしで動く。

4. Better Auth を追加する

npx nuxi module add @onmax/nuxt-better-auth

Better Auth は TypeScript ファーストの認証ライブラリで、27 以上のプラグイン（2FA、組織管理、APIキー、マジックリンクなど）と 33 以上の OAuth プロバイダーに対応している。nuxt.config.ts に数行書くだけで認証が動き始める。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@onmax/nuxt-better-auth'],
  routeRules: {
    '/dashboard/**': { auth: 'user' },
    '/admin/**': { auth: 'admin' },
  },
})

ルート保護は routeRules で宣言するだけでよく、ミドルウェアを手書きする必要はない。

5. ページリソースを生成する

npx nuxt-crud init
npx nuxt-crud make:model Post "title:string,content:string:required"

init はデータベースの初期化と User モデルの生成をまとめて実行する。make:model にはモデル名とフィールド定義を渡すだけで、Drizzle スキーマ・index/show/create/update/delete の API エンドポイント・Zod バリデーション・レスポンスの型定義が一括生成される。

「0 tokens used」が意味すること

デモのキャプションに「0 tokens used」と書かれている。AI の補助なしで完結するという意味だ。LLM に設計の判断を委ねるのではなく、決定論的なコード生成で確実に動くコードを出力する。ランダム性やハルシネーションがない分、チーム開発や CI 環境での扱いが安定する。

NuxtHub でのデプロイ

生成したプロジェクトは NuxtHub CLI でそのまま Cloudflare Pages にデプロイできる。

npm install -g nuxthub
nuxthub deploy --production

データベースは Cloudflare D1（SQLite）、ファイルは Cloudflare R2、KVキャッシュも含めてゼロ設定で動く。Vercel + PostgreSQL 構成も選択できるため、インフラの縛りはない。

nuxt-crud の構成

nuxt-crud はモノレポ構成で3つのパッケージを持つ。

  • cli — nuxt-crud コマンド本体。make:model・make:database・init を提供する
  • module — Drizzle ORM のモデルから管理画面を自動生成する Nuxt モジュール
  • docs — ドキュメント

cli は npm でグローバルインストールするか、npx でそのまま使える。

npm install -g nuxt-crud-cli
# または
npx nuxt-crud make:model User "name:string,email:string:required:unique"

まとめ

nuxt-crud の DashboardStack Init は、Nuxt + Nuxt UI + Drizzle ORM + Better Auth + NuxtHub という現時点で実績のある組み合わせを、AIなしで即座にセットアップするワークフローだ。Laravel の artisan に慣れた開発者や、毎回の初期設定に時間をかけたくないチームには特に使いやすい。