Nuxt

Ecosystem

Add the SDK to a Nuxt app to get resource detection, typed database queries and migrations. Nuxt keeps its own build and Cloudflare integration. The SDK plugs into its Vite config.

On this pageSet up the SDK in a Nuxt project · Use SDK features such as void/db from Nuxt · Reach Cloudflare bindings directly when you need them

Setup

Follow these steps in order.

1. Create a new project

Now you will create a new app and open the new app folder.

npm create nuxt@latest my-app
cd my-app

Example output: the scaffolder asks a few questions and creates the app folder.

2. Install dependencies

Now you will install the dependencies.

npm install -D void

Example output: npm finishes with added N packages and no errors.

The SDK includes the Cloudflare tooling that Nuxt's platform proxy uses in dev.

3. Configure nuxt.config.ts

import { resolve } from 'node:path';
import { voidPlugin } from 'void';

export default defineNuxtConfig({
  alias: {
    '@schema': resolve(import.meta.dirname, 'db/schema.ts'),
  },
  nitro: {
    preset: 'cloudflare-module',
    modules: ['void/nitro'],
    cloudflare: { dev: { configPath: './.void-wrangler.jsonc' } },
    // Required for Nuxt 4.6.0 on Windows.
    externals: {
      inline: [/[\\/]node_modules[\\/]nuxt[\\/]dist[\\/]/],
    },
  },
  vite: { plugins: [voidPlugin()] },
});

This config does three things:

• The void/nitro module gives Nuxt server routes your app's void/db and @schema.
• The top-level alias lets nuxi typecheck resolve @schema. Nuxt also checks server routes with the app's types.
• cloudflare.dev passes the bindings from the SDK's generated Cloudflare config to the dev server. Nuxt uses it in dev when compatibilityDate is 2025-07-15 or later.

4. Create void.config.ts

This step creates the config that the SDK turns into Nuxt's dev Cloudflare config:

import { defineConfig } from 'void/config';

export default defineConfig({
  cloudflare: {
    name: 'my-app',
    compatibility_date: '2026-02-24',
    compatibility_flags: ['nodejs_compat', 'nodejs_als'],
  },
});

5. Deploy

Requires: login to your deploy target

void auth login opens your browser to sign in to Cloudflare or your team's platform. No token goes in your project.

Now you will sign in and deploy the app.

void auth login
void deploy

Example output: A browser window opens. The CLI confirms the sign-in when you finish. Build and upload progress, then the live URL.

Use SDK features

Most SDK platform features work with Nuxt. Use them in server routes, API handlers and middleware:

Framework mode does not support SDK-managed auth yet. Use Better Auth's official Nuxt integration for now.

Database

import { users } from '@schema';
// server/api/users.get.ts
import { db } from 'void/db';

export default defineEventHandler(async () => {
  return db.select().from(users);
});

Other resources

Use KV, object storage and AI in server-side code. The imports are the same as in an SDK app. Add cron jobs in crons/ and queue consumers in queues/.

Environment variables

Declare variables in env.ts. Read them with import { env } from "void/env". See Environment Variables for local values, production secrets and public VITE_* values.

For environment variables, void/env replaces useRuntimeConfig() and event.context.cloudflare.env. Keep event.context.cloudflare.env for raw binding access, such as D1, KV or R2. Keep useRuntimeConfig() for runtime config that is not an env var.

Access bindings directly

You can also read raw Cloudflare bindings from Nitro's event context:

// server/api/users.get.ts
export default defineEventHandler(async (event) => {
  const { DB } = event.context.cloudflare.env;
  const { results } = await DB.prepare('SELECT * FROM users').all();
  return results;
});

Next steps

NextAnalogPreviousSvelteKitZoneAll Ecosystem pages