Nuxthub
Deploy a Nuxt app with NuxtHub across Cloudflare, Vercel, or Netlify using hub-driven D1, KV, R2, and cache bindings without hand-writing wrangler from scratch.
Overview
NuxtHub is an agent skill most often used in Operate (also Ship launch, Build backend) that documents multi-cloud NuxtHub deployment patterns with Cloudflare-first D1, KV, R2, and cache configuration.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill nuxthubWhat is this skill?
- Auto-detects cloud provider; Cloudflare is primary with full D1, KV, R2, and Cache support
- Maps nuxt.config hub blocks to wrangler bindings for db, kv, cache, and blob
- Documents wrangler observability: logs enabled, head_sampling_rate, invocation_logs, persist
- Includes wrangler CLI recipes to create D1, KV namespaces, and R2 buckets
- Supports preview/staging via CLOUDFLARE_ENV=preview and env-specific database IDs in wrangler.jsonc
- Supports Cloudflare, Vercel, Netlify, and other providers with auto-detection
- Four hub resource types documented: db (D1), kv, cache, blob (R2)
- Example observability block: logs enabled with head_sampling_rate 1
Adoption & trust: 1.3k installs on skills.sh; 674 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have hub database, KV, cache, and blob settings in Nuxt but do not know how to bind them on Cloudflare or mirror the setup across preview and production.
Who is it for?
Solo builders deploying Nuxt 3+ SaaS or APIs on Cloudflare Workers with NuxtHub storage modules.
Skip if: Pure static sites with no hub data layer, or teams standardized on a non-Nuxt framework without NuxtHub.
When should I use this skill?
User deploys a Nuxt app with NuxtHub, configures Cloudflare D1/KV/R2/cache bindings, or needs preview vs production wrangler environments.
What do I get? / Deliverables
You get a repeatable nuxt.config and wrangler layout plus resource-creation commands so builds target the right cloud bindings and logging in each environment.
- nuxt.config.ts hub configuration snippet
- wrangler.jsonc with bindings and optional env.preview overrides
- CLI command list for creating D1, KV, and R2 resources
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Operate is the canonical shelf because the skill is about running the app on real cloud bindings, environments, and observability—not first-time UI coding. Infra covers multi-provider deployment targets, generated wrangler.json, resource creation commands, and preview vs production environment splits.
Where it fits
Pick hub db driver d1 and sqlite dialect while scaffolding the app's data layer.
Run production vs preview builds with CLOUDFLARE_ENV before opening traffic.
Turn on wrangler observability and align R2/KV namespace IDs across environments.
How it compares
Reference deployment patterns for NuxtHub bindings—not a generic “deploy to Vercel” one-liner or an MCP server installer.
Common Questions / FAQ
Who is nuxthub for?
Indie developers using NuxtHub who need Cloudflare-centric D1/KV/R2 setup and multi-environment wrangler config from their coding agent.
When should I use nuxthub?
Use it in Operate when wiring production infra; in Ship when preparing launch builds and preview stacks; in Build when choosing backend drivers in nuxt.config hub blocks.
Is nuxthub safe to install?
It is documentation-style guidance; review Security Audits on this page and never commit production database IDs or secrets into public repos.
SKILL.md
READMESKILL.md - Nuxthub
# Multi-Cloud Deployment Patterns NuxtHub supports Cloudflare, Vercel, Netlify, and other cloud providers with auto-detection based on environment. ## Cloudflare **Primary deployment target** - full feature support (D1, KV, R2, Cache). ### Auto-Configuration NuxtHub generates wrangler.json from hub config: ```ts // 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: ```jsonc // wrangler.jsonc { "observability": { "logs": { "enabled": true, "head_sampling_rate": 1, "invocation_logs": true, "persist": true } } } ``` ### Create Resources ```bash npx wrangler d1 create my-db npx wrangler kv namespace create KV npx wrangler kv namespace create CACHE npx wrangler r2 bucket create my-bucket ``` ### Environments ```bash # Production npx nuxi build # Preview/Staging CLOUDFLARE_ENV=preview npx nuxi build ``` Configure in wrangler.jsonc: ```jsonc { "d1_databases": [{ "binding": "DB", "database_id": "prod-id" }], "env": { "preview": { "d1_databases": [{ "binding": "DB", "database_id": "preview-id" }] } } } ``` ## Vercel Deploy NuxtHub apps on Vercel with marketplace integrations. ### Database **Option 1: Vercel Postgres** ```bash # Via Vercel dashboard: Storage > Create Database > Postgres # Get DATABASE_URL from environment variables ``` ```ts // nuxt.config.ts export default defineNuxtConfig({ hub: { db: { dialect: 'postgresql', driver: 'postgres-js' // DATABASE_URL env var auto-detected } } }) ``` **Option 2: Turso (SQLite)** ```bash # Install via Vercel Marketplace # Get TURSO_DATABASE_URL and TURSO_AUTH_TOKEN ``` ```ts hub: { db: { dialect: 'sqlite', driver: 'libsql' // TURSO_* env vars auto-detected } } ``` ### KV Storage **Vercel KV (Upstash Redis)** ```bash # Via Vercel dashboard: Storage > Create > KV # Get KV_REST_API_URL and KV_REST_API_TOKEN ``` ```ts hub: { kv: true // Auto-detects Vercel KV via env vars } ``` **Alternative: Upstash Redis** ```ts hub: { kv: { driver: 'redis', // UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN } } ``` ### Blob Storage **Vercel Blob** ```bash # Via Vercel dashboard: Storage > Create > Blob # Get BLOB_READ_WRITE_TOKEN ``` ```ts hub: { blob: true // Auto-detects Vercel Blob via env var } ``` ### Cache Uses Vercel Runtime Cache (built-in): ```ts hub: { cache: true // Auto-uses Vercel runtime cache in production } ``` ## Netlify Compatible with NuxtHub via external database providers. ### Database Use external providers via env vars: - **Turso:** `TURSO_DATABASE_URL`, `TURSO_AUTH_TOKEN` - **Neon:** `DATABASE_URL` (PostgreSQL) - **PlanetScale:** `DATABASE_URL` (MySQL) ```ts // nuxt.config.ts export default defineNuxtConfig({ hub: { db: { dialect: 'sqlite', driver: 'libsql' // or postgres-js, mysql2 } } }) ``` ### KV Storage - **Upstash Redis:** `UPSTASH_REDIS_REST_URL`, `UPSTASH_REDIS_REST_TOKEN` - **AWS S3 (as KV):** `S3_ACCESS_KEY_ID`, `S3_SECRET_ACCESS_KEY`, `S3_BUCKET`, `S3_REGION` ```ts hub: { kv: true // Auto-detects provider } ``` ### Blob Storage **AWS S3** ```bash # Set env vars in Netlify dashboard S3_ACCESS_KEY_ID=<key> S3_SECRET_ACCESS_KEY=<secret> S3_BUCKET=<bucket-name> S3_REGION=<region> ``` ```ts hub: { blob: true // Auto-detects S3 config } ``` ## Other Providers (Generic) ### Deno Deploy **Deno KV** (auto-detected): ```ts hub: { kv: true // Uses Deno.openKv() } ``` ### AWS / Self-Hosted **Database:** - Pos