PluginBench
Skill
Review
Audit score 70

nuxthub

onmax/nuxt-skills

Full-stack Nuxt with type-safe database, KV, blob storage, and cache—multi-cloud ready.

What is nuxthub?

NuxtHub v0.10.6 extends Nuxt with production-grade backend services: Drizzle ORM database (SQLite/PostgreSQL/MySQL), key-value storage, blob/file storage, and caching. Use it when building data-driven Nuxt applications that need persistent storage and multi-cloud deployment (Cloudflare, Vercel, Deno, Netlify).

  • Type-safe SQL queries via Drizzle ORM with SQLite, PostgreSQL, or MySQL dialects
  • Key-value storage with TTL support and multiple provider backends (Upstash, Redis, Cloudflare KV, Vercel KV)
  • Blob/file storage with upload validation, multipart uploads for large files, and public/private access control
  • Automatic schema migrations with CLI tools (generate, migrate, squash, drop)
  • Multi-cloud deployment with production bindings for Cloudflare, Vercel, Deno, Netlify, and external databases
  • Read replica support for distributing database load across multiple instances

How to install nuxthub

npx skills add https://github.com/onmax/nuxt-skills --skill nuxthub
Prerequisites
  • Nuxt 3.x project with `@nuxthub/core` module installed via `npx nuxi module add hub`
  • Node.js environment for local development
  • For production: Cloudflare account (D1, KV, R2), Vercel, Deno Deploy, or external database/storage credentials
Claude Code
Cursor
Windsurf
Cline

How to use nuxthub

  1. 1.Install the hub module: `npx nuxi module add hub`
  2. 2.Configure `nuxt.config.ts` with desired services (db dialect, kv, blob, cache) and storage directory
  3. 3.Define your database schema in `server/db/schema.ts` using Drizzle ORM table definitions
  4. 4.Generate and apply migrations: `npx nuxt db generate` then `npx nuxt db migrate`
  5. 5.Import and use `db`, `kv`, and `blob` from their virtual modules (`hub:db`, `hub:kv`, `hub:blob`) in server routes and middleware
  6. 6.Deploy to your chosen provider (Cloudflare, Vercel, etc.) and configure production bindings via environment variables or wrangler.jsonc

Use cases

Good for
  • Building a SaaS application with user accounts, data persistence, and file uploads
  • Storing session data and cache in KV for fast API responses
  • Uploading and serving user-generated content (images, documents) with access control
  • Migrating from a traditional backend to serverless with Cloudflare Workers or Vercel Functions
  • Testing production database behavior locally via remote mode without affecting live data
Who it's for
  • Full-stack Nuxt developers building data-driven applications
  • Teams deploying to serverless platforms (Cloudflare, Vercel, Deno)
  • Developers needing type-safe database queries with Drizzle ORM
  • Projects requiring multi-cloud flexibility or read-replica scaling

nuxthub FAQ

What's the difference between local and remote mode?

Local mode emulates services (.data directory for SQLite, in-memory KV/blob). Remote mode (v0.10+) connects to production Cloudflare/Vercel bindings during development, useful for testing with real production data without affecting it.

Can I use an external database instead of D1?

Yes. For PostgreSQL, set `DATABASE_URL` to postgres-js or neon-http. For MySQL, use `DATABASE_URL` or `MYSQL_URL`. For SQLite, use Turso with `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN`.

How do I handle large file uploads?

Use `blob.handleMultipartUpload()` for files >10MB. It provides progress tracking and automatic chunking via a multipart route at `/api/files/multipart/[action]/[...pathname]`.

Are migrations applied automatically?

Yes, migrations auto-apply during `npx nuxi dev` and `npx nuxi build`. You can also run them manually with `npx nuxt db migrate` or mark them as applied without running via `npx nuxt db mark-as-migrated`.

What KV providers are supported?

Cloudflare KV, Deno KV, Upstash Redis, Redis (ioredis), and Vercel KV. Each requires specific environment variables or wrangler.jsonc bindings.

Full instructions (SKILL.md)

Source of truth, from onmax/nuxt-skills.


name: nuxthub description: Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports. license: MIT

NuxtHub v0.10.6

Full-stack Nuxt framework with database, KV, blob, and cache. Multi-cloud support (Cloudflare, Vercel, Deno, Netlify).

For Nuxt server patterns: use nuxt skill (server.md) For content with database: use nuxt-content skill

Loading Files

Consider loading these reference files based on your task:

DO NOT load all files at once. Load only what's relevant to your current task.

Installation

npx nuxi module add hub

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxthub/core'],
  hub: {
    db: 'sqlite', // 'sqlite' | 'postgresql' | 'mysql'
    kv: true,
    blob: true,
    cache: true,
    dir: '.data', // local storage directory
    remote: false // use production bindings in dev (v0.10+)
  }
})

Advanced Config

hub: {
  db: {
    dialect: 'postgresql',
    driver: 'postgres-js', // Optional: auto-detected
    casing: 'snake_case',  // camelCase JS -> snake_case DB (v0.10.3+)
    migrationsDirs: ['server/db/custom-migrations/'],
    applyMigrationsDuringBuild: true, // default
    replica: { // Read replica support (v0.10.6+)
      connection: { connectionString: process.env.DATABASE_REPLICA_URL }
    }
  },
  remote: true // Use production Cloudflare bindings in dev (v0.10+)
}

remote mode: When enabled, connects to production D1/KV/R2 during local development instead of local emulation. Useful for testing with production data.

Database replica (v0.10.6+): Configure read replicas to distribute database load. Queries use replicas automatically while writes go to primary.

Database

Type-safe SQL via Drizzle ORM. db and schema are auto-imported on server-side.

Schema Definition

Place in server/db/schema.ts or server/db/schema/*.ts:

// server/db/schema.ts (SQLite)
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'

export const users = sqliteTable('users', {
  id: integer().primaryKey({ autoIncrement: true }),
  name: text().notNull(),
  email: text().notNull().unique(),
  createdAt: integer({ mode: 'timestamp' }).notNull()
})

PostgreSQL variant:

import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core'

export const users = pgTable('users', {
  id: serial().primaryKey(),
  name: text().notNull(),
  email: text().notNull().unique(),
  createdAt: timestamp().notNull().defaultNow()
})

Database API

// db and schema are auto-imported on server-side
import { db, schema } from 'hub:db'

// Select
const users = await db.select().from(schema.users)
const user = await db.query.users.findFirst({ where: eq(schema.users.id, 1) })

// Insert
const [newUser] = await db.insert(schema.users).values({ name: 'John', email: 'john@example.com' }).returning()

// Update
await db.update(schema.users).set({ name: 'Jane' }).where(eq(schema.users.id, 1))

// Delete
await db.delete(schema.users).where(eq(schema.users.id, 1))

Migrations

npx nuxt db generate                  # Generate migrations from schema
npx nuxt db migrate                   # Apply pending migrations
npx nuxt db sql "SELECT * FROM users" # Execute raw SQL
npx nuxt db drop <TABLE>              # Drop a specific table
npx nuxt db drop-all                  # Drop all tables (v0.10+)
npx nuxt db squash                    # Squash migrations into one (v0.10+)
npx nuxt db mark-as-migrated [NAME]   # Mark as migrated without running

Migrations auto-apply during npx nuxi dev and npx nuxi build. Tracked in _hub_migrations table.

Database Providers

DialectLocalProduction
sqlite.data/db/sqlite.dbD1 (Cloudflare), Turso (TURSO_DATABASE_URL, TURSO_AUTH_TOKEN)
postgresqlPGlitepostgres-js (DATABASE_URL), neon-http (v0.10.2+, DATABASE_URL)
mysql-mysql2 (DATABASE_URL, MYSQL_URL)

KV Storage

Key-value storage. kv is auto-imported on server-side.

import { kv } from 'hub:kv'

await kv.set('key', { data: 'value' })
await kv.set('key', value, { ttl: 60 }) // TTL in seconds
const value = await kv.get('key')
const exists = await kv.has('key')
await kv.del('key')
const keys = await kv.keys('prefix:')
await kv.clear('prefix:')

Constraints: max value 25 MiB, max key 512 bytes.

KV Providers

ProviderPackageEnv Vars
Upstash@upstash/redisUPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN
RedisioredisREDIS_URL
Cloudflare KV-KV binding in wrangler.jsonc
Deno KV-Auto on Deno Deploy
Vercel-KV_REST_API_URL, KV_REST_API_TOKEN

Blob Storage

File storage. blob is auto-imported on server-side.

Blob API

import { blob } from 'hub:blob'

// Upload
const result = await blob.put('path/file.txt', body, {
  contentType: 'text/plain',
  access: 'public', // 'public' | 'private' (v0.10.2+)
  addRandomSuffix: true,
  prefix: 'uploads'
})
// Returns: { pathname, contentType, size, httpEtag, uploadedAt }

// Download
const file = await blob.get('path/file.txt') // Returns Blob or null

// List
const { blobs, cursor, hasMore, folders } = await blob.list({ prefix: 'uploads/', limit: 10, folded: true })

// Serve (with proper headers)
return blob.serve(event, 'path/file.txt')

// Delete
await blob.del('path/file.txt')
await blob.del(['file1.txt', 'file2.txt']) // Multiple

// Metadata only
const meta = await blob.head('path/file.txt')

Upload Helpers

// Server: Validate + upload handler
export default eventHandler(async (event) => {
  return blob.handleUpload(event, {
    formKey: 'files',
    multiple: true,
    ensure: { maxSize: '10MB', types: ['image/png', 'image/jpeg'] },
    put: { addRandomSuffix: true, prefix: 'images' }
  })
})

// Validate before manual upload
ensureBlob(file, { maxSize: '10MB', types: ['image'] })

// Multipart upload for large files (>10MB)
export default eventHandler(async (event) => {
  return blob.handleMultipartUpload(event) // Route: /api/files/multipart/[action]/[...pathname]
})

Vue Composables

// Simple upload
const upload = useUpload('/api/upload')
const result = await upload(inputElement)

// Multipart with progress
const mpu = useMultipartUpload('/api/files/multipart')
const { completed, progress, abort } = mpu(file)

Blob Providers

ProviderPackageConfig
Cloudflare R2-BLOB binding in wrangler.jsonc
Vercel Blob@vercel/blobBLOB_READ_WRITE_TOKEN
S3aws4fetchS3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_BUCKET, S3_REGION

Cache

Response and function caching.

Route Handler Caching

export default cachedEventHandler((event) => {
  return { data: 'cached', date: new Date().toISOString() }
}, {
  maxAge: 60 * 60, // 1 hour
  getKey: event => event.path
})

Function Caching

export const getStars = defineCachedFunction(
  async (event: H3Event, repo: string) => {
    const data = await $fetch(`https://api.github.com/repos/${repo}`)
    return data.stargazers_count
  },
  { maxAge: 3600, name: 'ghStars', getKey: (event, repo) => repo }
)

Cache Invalidation

// Remove specific
await useStorage('cache').removeItem('nitro:functions:getStars:repo-name.json')

// Clear by prefix
await useStorage('cache').clear('nitro:handlers')

Cache key pattern: ${group}:${name}:${getKey(...args)}.json (defaults: group='nitro', name='handlers'|'functions'|'routes')

Deployment

Cloudflare

NuxtHub auto-generates wrangler.json from your hub config - no manual wrangler.jsonc required:

// nuxt.config.ts
export default defineNuxtConfig({
  hub: {
    db: {
      dialect: 'sqlite',
      driver: 'd1',
      connection: { databaseId: '<database-id>' }
    },
    kv: {
      driver: 'cloudflare-kv-binding',
      namespaceId: '<kv-namespace-id>'
    },
    cache: {
      driver: 'cloudflare-kv-binding',
      namespaceId: '<cache-namespace-id>'
    },
    blob: {
      driver: 'cloudflare-r2',
      bucketName: '<bucket-name>'
    }
  }
})

Observability (recommended): Enable logging for production deployments:

// wrangler.jsonc (optional)
{
  "observability": {
    "logs": {
      "enabled": true,
      "head_sampling_rate": 1,
      "invocation_logs": true,
      "persist": true
    }
  }
}

Create resources via Cloudflare dashboard or CLI:

npx wrangler d1 create my-db              # Get database-id
npx wrangler kv namespace create KV       # Get kv-namespace-id
npx wrangler kv namespace create CACHE    # Get cache-namespace-id
npx wrangler r2 bucket create my-bucket   # Get bucket-name

Deploy: Create Cloudflare Workers project, link Git repo. Bindings auto-configured at build time.

Environments: Use CLOUDFLARE_ENV=preview for preview deployments.

See references/wrangler-templates.md for manual wrangler.jsonc patterns and references/providers.md for all provider configurations.

Other Providers

See references/providers.md for detailed deployment patterns for:

  • Vercel: Postgres, Turso, Vercel Blob, Vercel KV
  • Netlify: External databases, S3, Upstash Redis
  • Deno Deploy: Deno KV
  • AWS/Self-hosted: S3, RDS, custom configs

D1 over HTTP

Query D1 from non-Cloudflare hosts:

hub: {
  db: { dialect: 'sqlite', driver: 'd1-http' }
}

Requires: NUXT_HUB_CLOUDFLARE_ACCOUNT_ID, NUXT_HUB_CLOUDFLARE_API_TOKEN, NUXT_HUB_CLOUDFLARE_DATABASE_ID

Build-time Hooks

// Extend schema
nuxt.hook('hub:db:schema:extend', async ({ dialect, paths }) => {
  paths.push(await resolvePath(`./schema/custom.${dialect}`))
})

// Add migration directories
nuxt.hook('hub:db:migrations:dirs', (dirs) => {
  dirs.push(resolve('./db-migrations'))
})

// Post-migration queries (idempotent)
nuxt.hook('hub:db:queries:paths', (paths, dialect) => {
  paths.push(resolve(`./seed.${dialect}.sql`))
})

Type Sharing

// shared/types/db.ts
import type { users } from '~/server/db/schema'

export type User = typeof users.$inferSelect
export type NewUser = typeof users.$inferInsert

WebSocket / Realtime

Enable experimental WebSocket:

// nuxt.config.ts
nitro: { experimental: { websocket: true } }
// server/routes/ws/chat.ts
export default defineWebSocketHandler({
  open(peer) {
    peer.subscribe('chat')
    peer.publish('chat', 'User joined')
  },
  message(peer, message) {
    peer.publish('chat', message.text())
  },
  close(peer) {
    peer.unsubscribe('chat')
  }
})

Deprecated (v0.10)

Removed Cloudflare-specific features:

  • hubAI() -> Use AI SDK with Workers AI Provider
  • hubBrowser() -> Puppeteer
  • hubVectorize() -> Vectorize
  • NuxtHub Admin -> Sunset Dec 31, 2025
  • npx nuxthub deploy -> Use wrangler deploy

Quick Reference

FeatureImportAccess
Databaseimport { db, schema } from 'hub:db'db.select(), db.insert(), etc.
KVimport { kv } from 'hub:kv'kv.get(), kv.set(), etc.
Blobimport { blob } from 'hub:blob'blob.put(), blob.get(), etc.

All are auto-imported on server-side.

Resources