Installation
Installation
This guide will help you install and set up Nuxt Auto in your Nuxt project.
Prerequisites
Before installing Nuxt Auto, ensure you have:
- Node.js 20 or later
- Nuxt 4 — Nuxt 5 is tested against the nightly builds in CI, but not yet supported for production
- Package manager - npm, pnpm, yarn, or bun
- Drizzle ORM - For database schema definitions
Install Dependencies
1. Install Core Packages
First, install the Nuxt Auto modules:
# Using npm
npm install @websideproject/nuxt-auto-api @websideproject/nuxt-auto-admin
# Using pnpm
pnpm add @websideproject/nuxt-auto-api @websideproject/nuxt-auto-admin
# Using yarn
yarn add @websideproject/nuxt-auto-api @websideproject/nuxt-auto-admin
# Using bun
bun add @websideproject/nuxt-auto-api @websideproject/nuxt-auto-admin
If you only need the API module, you can install just @websideproject/nuxt-auto-api.
2. Install Nuxt UI and Tailwind CSS (Required for Admin)
The admin module is built on Nuxt UI v4, which runs on Tailwind CSS v4:
# Using npm
npm install @nuxt/ui tailwindcss
# Using pnpm
pnpm add @nuxt/ui tailwindcss
# Using yarn
yarn add @nuxt/ui tailwindcss
# Using bun
bun add @nuxt/ui tailwindcss
Import both in your app's stylesheet and register it:
/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
// nuxt.config.ts
export default defineNuxtConfig({
css: ['~/assets/css/main.css'],
})
3. Install Drizzle ORM
Choose your database and install the corresponding Drizzle packages:
SQLite (better-sqlite3)
npm install drizzle-orm better-sqlite3
npm install -D drizzle-kit @types/better-sqlite3
PostgreSQL
npm install drizzle-orm postgres
npm install -D drizzle-kit
MySQL
npm install drizzle-orm mysql2
npm install -D drizzle-kit
Cloudflare D1
npm install drizzle-orm
npm install -D drizzle-kit wrangler
Turso
npm install drizzle-orm @libsql/client
npm install -D drizzle-kit
4. Install Optional Dependencies
TanStack Query, Zod and drizzle-zod come with @websideproject/nuxt-auto-api. Add them to your own
package.json only when your code imports them (strict package managers such as pnpm require it):
npm install zod drizzle-zod # your own validation schemas, createEndpoint body/query schemas
npm install @tanstack/vue-query # useQueryClient() in your components
Better Auth (for authentication):
npm install better-auth
Configure Modules
Add the modules to your nuxt.config.ts:
export default defineNuxtConfig({
modules: [
'@nuxt/ui', // Required for admin
'@websideproject/nuxt-auto-api', // API module
'@websideproject/nuxt-auto-admin', // Admin module
],
autoApi: {
prefix: '/api',
},
autoAdmin: {
prefix: '/admin',
branding: {
title: 'Admin Panel',
},
},
})
Important: nuxt-auto-api must be loaded before nuxt-auto-admin.
TypeScript Configuration
Ensure your tsconfig.json extends Nuxt's configuration:
{
"extends": "./.nuxt/tsconfig.json"
}
This gives you full type inference for all auto-generated composables and types.
Database Setup
Create your Drizzle schema and database connection:
1. Create Schema
// server/database/schema.ts
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'
export const users = sqliteTable('users', {
id: integer('id').primaryKey({ autoIncrement: true }),
email: text('email').notNull().unique(),
name: text('name'),
role: text('role', { enum: ['user', 'admin'] }).default('user'),
createdAt: integer('created_at', { mode: 'timestamp' }).$defaultFn(() => new Date()),
})
2. Initialize Database
// server/plugins/database.ts
import { drizzle } from 'drizzle-orm/better-sqlite3'
import Database from 'better-sqlite3'
import { initializeDatabase } from '@websideproject/nuxt-auto-api/database'
import * as schema from '../database/schema'
export default defineNitroPlugin(() => {
const sqlite = new Database('sqlite.db')
const db = drizzle(sqlite, { schema })
initializeDatabase(db, 'better-sqlite3')
})
3. Configure Drizzle Kit
// drizzle.config.ts
import { defineConfig } from 'drizzle-kit'
export default defineConfig({
schema: './server/database/schema.ts',
out: './drizzle',
dialect: 'sqlite',
dbCredentials: {
url: 'sqlite.db',
},
})
4. Generate and Run Migrations
# Generate migration
npx drizzle-kit generate
# Push schema to database (development)
npx drizzle-kit push
Verify Installation
Start your development server:
npm run dev
The admin panel answers at http://localhost:3000/admin. The API has no routes yet: routes are generated
for registered resources only, and every resource needs an authorization — the
Quick Start registers the first ones.
Next Steps
- Quick Start - Build your first API and admin panel
- Auto API - Getting Started - Configure API features
- Auto Admin - Getting Started - Customize admin panel
Troubleshooting
Module Not Found Errors
If you get module resolution errors, try:
# Clear Nuxt cache
rm -rf .nuxt
# Reinstall dependencies
rm -rf node_modules
npm install
# Rebuild
npm run dev
Database Connection Issues
Ensure your database path is correct and the database file exists. For SQLite, the file will be created automatically on first run.
Type Errors
Make sure you're extending Nuxt's TypeScript config:
{
"extends": "./.nuxt/tsconfig.json"
}
Restart your TypeScript server in your editor after changes.
Introduction
Nuxt Auto is a collection of modules that dramatically accelerate full-stack development by automatically generating production-ready APIs and admin interfaces from your database schemas.
Quick Start
This guide will walk you through creating your first API and admin panel with Nuxt Auto in under 10 minutes.