npx nuxi@latest init my-app
cd my-app

npm install @websideproject/nuxt-auto-api @websideproject/nuxt-auto-admin @nuxt/ui
npm install drizzle-orm better-sqlite3
npm install -D drizzle-kit @types/better-sqlite3

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@websideproject/nuxt-auto-api',
    '@websideproject/nuxt-auto-admin',
  ],

  autoApi: {
    prefix: '/api',
    database: {
      client: 'better-sqlite3',
    },
  },

  autoAdmin: {
    prefix: '/admin',
    branding: {
      title: 'Blog Admin',
    },
  },

  compatibilityDate: '2024-01-01',
})

import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'

export const posts = sqliteTable('posts', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  title: text('title').notNull(),
  slug: text('slug').notNull().unique(),
  content: text('content'),
  published: integer('published', { mode: 'boolean' }).default(false),
  createdAt: integer('created_at', { mode: 'timestamp' }).$defaultFn(() => new Date()),
  updatedAt: integer('updated_at', { mode: 'timestamp' }).$defaultFn(() => new Date()),
})

export const authors = sqliteTable('authors', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  bio: text('bio'),
})

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')
})

import type { Config } from 'drizzle-kit'

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

npx drizzle-kit push:sqlite

import { defineNuxtModule, createResolver } from '@nuxt/kit'
import { createModuleImport } from '@websideproject/nuxt-auto-api'

export default defineNuxtModule({
  meta: {
    name: 'base',
  },
  setup(_options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.hook('autoApi:registerSchema', (registry) => {
      registry.register('posts', {
        schema: createModuleImport(
          resolver.resolve('../../server/database/schema'),
          'posts'
        ),
      })

      registry.register('authors', {
        schema: createModuleImport(
          resolver.resolve('../../server/database/schema'),
          'authors'
        ),
      })
    })
  },
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@websideproject/nuxt-auto-api',
    '@websideproject/nuxt-auto-admin',
    './modules/base',  // Add this
  ],

  // ... rest of config
})

npm run dev

GET    /api/posts           # List all posts
GET    /api/posts/:id       # Get single post
POST   /api/posts           # Create post
PATCH  /api/posts/:id       # Update post
DELETE /api/posts/:id       # Delete post

GET    /api/authors         # List all authors
GET    /api/authors/:id     # Get single author
POST   /api/authors         # Create author
PATCH  /api/authors/:id     # Update author
DELETE /api/authors/:id     # Delete author

# Create an author
curl -X POST http://localhost:3000/api/authors \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"john@example.com"}'

# Create a post
curl -X POST http://localhost:3000/api/posts \
  -H "Content-Type: application/json" \
  -d '{"title":"Hello World","slug":"hello-world","content":"My first post"}'

# List posts
curl http://localhost:3000/api/posts

<template>
  <div>
    <h1>Blog Posts</h1>

    <div v-if="isLoading">Loading...</div>

    <ul v-else>
      <li v-for="post in posts?.data" :key="post.id">
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const { data: posts, isLoading } = useAutoApiList('posts', {
  filter: { published: true },
  sort: '-createdAt',
  limit: 10,
})
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.title" placeholder="Title" required>
    <textarea v-model="form.content" placeholder="Content"></textarea>
    <button type="submit" :disabled="isPending">
      {{ isPending ? 'Creating...' : 'Create Post' }}
    </button>
  </form>
</template>

<script setup lang="ts">
const form = reactive({
  title: '',
  slug: '',
  content: '',
})

const { mutateAsync: createPost, isPending } = useAutoApiMutation('posts', 'create', {
  toast: {
    success: { title: 'Post created!' },
    error: { title: 'Failed to create post' }
  }
})

const handleSubmit = async () => {
  form.slug = form.title.toLowerCase().replace(/\s+/g, '-')
  await createPost(form)
  Object.assign(form, { title: '', slug: '', content: '' })
}
</script>

export default defineNuxtConfig({
  // ... modules

  autoAdmin: {
    prefix: '/admin',
    branding: {
      title: 'Blog Admin',
      logo: '/logo.svg',
    },
    resources: {
      posts: {
        displayName: 'Blog Posts',
        icon: 'i-heroicons-document-text',
        group: 'Content',
        listFields: ['id', 'title', 'published', 'createdAt'],
        formFields: {
          edit: [
            { name: 'title', widget: 'TextInput', required: true },
            { name: 'slug', widget: 'SlugInput', options: { generateFrom: 'title' } },
            { name: 'content', widget: 'MarkdownEditor' },
            { name: 'published', widget: 'Checkbox' },
          ],
        },
      },
      authors: {
        displayName: 'Authors',
        icon: 'i-heroicons-user-group',
        group: 'Content',
        listFields: ['id', 'name', 'email'],
      },
    },
  },
})

git clone https://github.com/websideproject/nuxt-auto
cd nuxt-auto/apps/playground
bun install
bun dev