logowebsideproject

Installation

This guide will help you install and set up Nuxt Auto in your Nuxt 3 project.

Installation

This guide will help you install and set up Nuxt Auto in your Nuxt 3 project.

Prerequisites

Before installing Nuxt Auto, ensure you have:

  • Node.js 18.x or later
  • Nuxt 3 (latest stable version recommended)
  • 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 (Required for Admin)

The admin module requires Nuxt UI for its components:

# Using npm
npm install @nuxt/ui

# Using pnpm
pnpm add @nuxt/ui

# Using yarn
yarn add @nuxt/ui

# Using bun
bun add @nuxt/ui

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

For additional features:

TanStack Query (for frontend data fetching):

npm install @tanstack/vue-query

Zod (for validation):

npm install zod drizzle-zod

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',
    database: {
      client: 'better-sqlite3',  // or 'pg', 'mysql2', 'd1', 'turso'
    },
  },

  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 type { Config } from 'drizzle-kit'

export default {
  schema: './server/database/schema.ts',
  out: './drizzle',
  driver: 'better-sqlite3',
  dbCredentials: {
    url: 'sqlite.db',
  },
} satisfies Config

4. Generate and Run Migrations

# Generate migration
npx drizzle-kit generate:sqlite

# Push schema to database (development)
npx drizzle-kit push:sqlite

Verify Installation

Start your development server:

npm run dev

You should see:

  • API endpoints available at http://localhost:3000/api
  • Admin panel at http://localhost:3000/admin

Next Steps

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.

Need a Landing Page?

Modern landing pages with optional modules (blog, docs, forms, i18n). Let's discuss your project.

Build Your MVP

Full-stack SaaS development. Expert in database design, multi-tenancy, and scalable architecture.

Deployment Help

Dockerize your backend, set up CI/CD pipelines, deploy to Cloudflare or Hetzner. Early-stage setup.

Suggest a SaaS Tool

Missing a calculator or tool? Suggest what you'd like to see on our site.