Cloudflare Pages

The Nuxt Content module has a built-in integration with Cloudflare Pages to deploy your content.

The Module will automatically detect the build target and prepare the necessary configuration for Cloudflare Pages.

You can either use the --preset=cloudflare_pages option with the nuxi build command or use nuxt.config.ts to configure the preset.

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages',
  },
});

D1 Database

A D1 database connected to the app is required for the Nuxt Content module to work. By default the module uses the binding name DB. You can override the database configuration by providing your own in nuxt.config.ts.

After creating a new Cloudflare Pages project, you need to create a new D1 database and connect it to the project. Make sure to use the same binding name as the module is using.

Local Preview

While nuxi dev and nuxi build don't require any extra configuration, testing a build locally with nuxi preview requires Cloudflare's Wrangler to be configured to provide a temporary, local database for Nuxt Content to bind. This can be done with a wrangler.jsonc or wrangler.toml file. Because Wrangler creates a local database, database_name and database_id can safely, but don't need to, match the values in production.

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "example-db",
      "database_id": "example-db-id"
    }
  ]
}

That's it 🎉

Relevant resources:

• Nuxt Deploy documentation
• Cloudflare D1 documentation
• Create and bind a D1 database
• Cloudflare Pages documentation