From 8aa82f903116436463b9bd0a43e8dffeaf879bc3 Mon Sep 17 00:00:00 2001 From: SolidKalium Date: Mon, 27 Oct 2025 15:21:42 -0400 Subject: [PATCH] Update 4.cloudflare-pages.md Emphasize the necessity of creating a D1 database and how to configure wrangler so `nuxi preview` works. --- .../docs/6.deploy/4.cloudflare-pages.md | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/content/docs/6.deploy/4.cloudflare-pages.md b/docs/content/docs/6.deploy/4.cloudflare-pages.md index 3f3457af2..bf3b583db 100644 --- a/docs/content/docs/6.deploy/4.cloudflare-pages.md +++ b/docs/content/docs/6.deploy/4.cloudflare-pages.md @@ -7,19 +7,19 @@ description: Deploy your Content app to Cloudflare Pages Quick Setup 1. Use `nuxi build --preset=cloudflare_pages` to build your app -2. Create D1 database and connect to your project in Cloudflare Dashboard under `DB` binding name +2. Create and connect a D1 database to your project in the Cloudflare Dashboard using binding name `DB` 3. Deploy/Redeploy your app :: :hr -Nuxt Content module has a built-in integration with [Cloudflare Pages](https://pages.cloudflare.com) to deploy your content. +The Nuxt Content module has a built-in integration with [Cloudflare Pages](https://pages.cloudflare.com) to deploy your content. -Module will automatically detects the build target and prepare the necessary configuration for Cloudflare Pages. +The Module will automatically detect the build target and prepare the necessary configuration for Cloudflare Pages. -You can either use `--preset=cloudflare_pages` option on `nuxi build` command or use `nuxt.config.ts` to configure the preset. +You can either use the `--preset=cloudflare_pages` option with the `nuxi build` command or use `nuxt.config.ts` to configure the preset. -```ts +```ts [nuxt.config.ts] export default defineNuxtConfig({ nitro: { preset: 'cloudflare_pages', @@ -27,15 +27,31 @@ export default defineNuxtConfig({ }); ``` -The module requires a D1 database to be connected to the app in order to work. By default it will use the `DB` binding name. You can override the database configuration by providing your own database configuration in `nuxt.config.ts`. +## 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](/docs/getting-started/configuration#d1) 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. (default is `DB`) +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. + +```jsonc [wrangler.jsonc] +{ + "d1_databases": [ + { + "binding": "DB", + "database_name": "example-db", + "database_id": "example-db-id" + } + ] +} +``` That's it :tada: -Checkout: +Relevant resources: - [Nuxt Deploy documentation](https://nuxt.com/deploy/cloudflare) - [Cloudflare D1 documentation](https://developers.cloudflare.com/d1/) + - [Create and bind a D1 database](https://developers.cloudflare.com/d1/get-started/) - [Cloudflare Pages documentation](https://developers.cloudflare.com/pages/)