Skip to content
95 changes: 88 additions & 7 deletions content/3.deploy/cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,90 @@ nitroPreset: 'cloudflare'
website: 'https://pages.cloudflare.com/'
---

## Cloudflare Pages
## Cloudflare Workers

::tip
**Zero Configuration ✨**
:br
Integration with Cloudflare Pages is possible with zero configuration, [learn more](https://nitro.unjs.io/deploy#zero-config-providers).
::

Cloudflare Workers supports [static assets](https://developers.cloudflare.com/workers/static-assets/), making it easy to deploy a Nuxt application. You can learn more about it on the [Cloudflare documentation](https://developers.cloudflare.com/workers/frameworks/framework-guides/nuxt/).

::note
You must set a compatibility date to `2024-09-19` or later in both `nuxt.config.ts` and `wrangler.toml`/`wrangler.json`.
Checkout the [Nitro documentation](https://nitro.build/deploy/providers/cloudflare#cloudflare-module-workers) for the `cloudflare_module` preset.
::

::important
Checkout the [@nuxthub/core](/modules/hub) module to build full-stack Nuxt applications with Cloudflare, learn more on [hub.nuxt.com](https://hub.nuxt.com).
Cloudflare Static Assets is in Beta.
::

### Git Integration
### Deploy With Wrangler

If you use the GitHub/GitLab integration with Cloudflare Pages, **no configuration is required**. Pushing to your repository will automatically build your project and deploy it.
You can use [Wrangler](https://github.com/cloudflare/workers-sdk/tree/main/packages/wrangler) to deploy your project to Cloudflare.

1. Configure Nitro in `nuxt.config.ts` with the following configuration :

```ts
export default defineNuxtConfig({
compatibilityDate: "2025-03-01",
nitro: { cloudflare: { nodeCompat: true, deployConfig: true } }
});
```

By setting `deployConfig: true`, Nitro will automatically generate a `wrangler.json` that points to the correct build outputs.
If you need to add [Cloudflare Workers configuration](https://developers.cloudflare.com/workers/wrangler/configuration/), such as bindings, you can either:

- Set these in your Nuxt config under the `cloudflare: {wrangler : ... }` key. This has the same type as `wrangler.json`.
- Provide your own `wrangler.jsonc`. Nitro will automatically set the `main` and `assets.directory` keys to the correct build output.

```json [wrangler.jsonc]
{
"$schema": "https://unpkg.com/wrangler@latest/config-schema.json",
// Add your workers configuration here.
"observability": {
"enabled": true,
"head_sampling_rate": 0.1
}
}
```

2. Build your project for Cloudflare Workers:

```bash [Terminal]
npx nuxi build --preset=cloudflare_module
```

3. Deploy with Wrangler:

```bash [Terminal]
wrangler deploy
```

::tip
While developing your project with `nuxi dev`, [nitro-cloudflare-dev](https://github.com/nitrojs/nitro-cloudflare-dev) will provide access to local simulators of Cloudflare bindings. It is an experimental module.
You can use it by adding `modules: ["nitro-cloudflare-dev"]` to your nuxt config.
::
### Automatic Deploy With Git

If you're using GitHub or GitLab, Cloudflare workers has an integration to automatically deploy your project.

::note
Nuxt will detect the environment to set the correct [Server/Nitro preset](https://nitro.unjs.io/deploy/providers/cloudflare).
Checkout the [Workers Build](https://developers.cloudflare.com/workers/ci-cd/builds/git-integration/) documentation for the Git Integration.
::

To leverage server-side rendering on the edge, set the build command to: `nuxt build`
::important
[Workers Build](https://developers.cloudflare.com/workers/ci-cd/builds/) is in Beta.
::

To statically generate your website, set the build command to: `nuxt generate`
## Cloudflare Pages

::tip
**Zero Configuration ✨**
:br
Integration with Cloudflare Pages is possible with zero configuration, [learn more](https://nitro.unjs.io/deploy#zero-config-providers).
::

### Route matching

Expand All @@ -47,6 +108,18 @@ export default defineNuxtConfig({
})
```

### Git Integration

If you use the GitHub/GitLab integration with Cloudflare Pages, **no configuration is required**. Pushing to your repository will automatically build your project and deploy it.

::note
Nuxt will detect the environment to set the correct [Server/Nitro preset](https://nitro.unjs.io/deploy/providers/cloudflare).
::

To leverage server-side rendering on the edge, set the build command to: `nuxt build`

To statically generate your website, set the build command to: `nuxt generate`

### Direct Upload

Alternatively, you can use [wrangler](https://github.com/cloudflare/workers-sdk) to upload your project to Cloudflare.
Expand All @@ -67,10 +140,18 @@ In this case, you will have to set the preset manually.

## Learn more

::important
Checkout the [@nuxthub/core](/modules/hub) module to build full-stack Nuxt applications with Cloudflare, learn more on [hub.nuxt.com](https://hub.nuxt.com).
::

::read-more{to="https://nitro.unjs.io/deploy/providers/cloudflare" target="_blank"}
Head over **Nitro documentation** to learn more about the Cloudflare deployment preset.
::

::read-more{to="https://developers.cloudflare.com/workers/static-assets/compatibility-matrix/" target="_blank"}
To chose between Workers and Pages, look at the compatibility matrix. In the future Workers will be the preferred way to deploy application on cloudflare.
::

::read-more{to="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/#use-bindings-in-your-nuxt-application" target="_blank"}
Head over **CloudFlare Pages** documentation to learn more about it.
::
Expand Down