Nuxt

Deploy a Nuxt application to Cloudflare Pages with automatically configured defaults.

Minimal Example

Deploy a basic Nuxt site with default settings.

import { Nuxt } from "alchemy/cloudflare";

const nuxtSite = await Nuxt("my-nuxt-app");

Custom Bindings

Add database and other bindings to your Nuxt app.

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

const db = await D1Database("my-db", {
  name: "my-db",
});

const nuxtSiteWithDb = await Nuxt("my-nuxt-app-with-db", {
  command: "npm run build:cloudflare", // Custom build command
  bindings: {
    DB: db, // Add custom bindings
  },
});

Bind to a Worker

Bind a Nuxt app to a Cloudflare Worker.

import { Worker, Nuxt } from "alchemy/cloudflare";

const nuxtApp = await Nuxt("my-nuxt-app", {
  command: "npm run build",
});

await Worker("my-worker", {
  name: "my-worker",
  script: "console.log('Hello, world!')",
  bindings: {
    NUXT: nuxtApp,
  },
});

With Transform Hook

The transform hook allows you to customize the wrangler.json configuration. For example, adding a custom environment variable:

await Nuxt("my-app", {
  transform: {
    wrangler: (spec) => ({
      ...spec,
      vars: {
        ...spec.vars,
        CUSTOM_VAR: "value",
      },
    }),
  },
});