Nuxt

​

Installation

npm install alchemy nuxt nitro-cloudflare-dev

​

Configuration

import alchemy from "alchemy/cloudflare/nuxt";
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  devtools: { enabled: true },
  nitro: {
    preset: "cloudflare_module",
    cloudflare: alchemy(),
  },
  modules: ["nitro-cloudflare-dev"],
});

import alchemy from "alchemy";
import { D1Database, KVNamespace, Nuxt } from "alchemy/cloudflare";

const app = await alchemy("my-nuxt-app");

const [db, sessions] = await Promise.all([
  D1Database("database", {
    name: `${app.name}-${app.stage}-db`,
  }),
  KVNamespace("sessions", {
    title: `${app.name}-${app.stage}-sessions`,
  }),
]);

const website = await Nuxt("website", {
  bindings: {
    DB: db,
    SESSIONS: sessions,
  },
});

console.log({
  url: website.url,
});

await app.finalize();

npm exec tsx alchemy.run.ts

​

Configuration Options

​

Properties

• bindings: Cloudflare bindings (KV, R2, D1, etc.)
• build: Build command override
  • Default: nuxt build
• dev: Dev command override
  • Default: nuxt dev
• entrypoint: Worker entrypoint path
  • Default: .output/server/index.mjs
• assets: Static assets directory
  • Default: .output/public
• noBundle: Skip bundling
  • Default: true

​

Accessing Bindings

export default defineEventHandler(async (event) => {
  const db = event.context.cloudflare.env.DB;
  const result = await db.prepare("SELECT * FROM users").all();
  
  return result.results;
});

​

Local Development

• Local emulation of Cloudflare bindings
• Hot module replacement
• Development server with platform context

npm run dev

​

Node.js Compatibility

• Node.js built-in modules
• npm packages that depend on Node.js APIs
• Full Nuxt feature set

​

Build Optimization

const website = await Nuxt("website", {
  build: {
    command: "nuxt build --preset cloudflare_module",
    env: {
      NODE_ENV: "production",
    },
  },
});

​

Server Routes

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

​

Deployment Best Practices

• Use environment variables for secrets
• Configure bindings in alchemy.run.ts
• Test locally with nitro-cloudflare-dev
• Keep .output directory in .gitignore

​

Related Resources

• Website - Base resource for web applications
• D1 Database - SQL database
• KV Namespace - Key-value storage