---
title: "Cloudflare"
description: "Configure Nuxt Skew Protection for Cloudflare Workers, Pages, and NuxtHub."
canonical_url: "https://nuxtseo.com/docs/skew-protection/providers/cloudflare"
last_updated: "2026-09-06T08:58:38.578Z"
---

[Cloudflare](https://cloudflare.com) has several deployment options for Nuxt applications:

| Deployment Option                                                           | [Update Strategy](/docs/skew-protection/guides/update-strategies)                   | [Storage](/docs/skew-protection/api/config#storage-storageoptions) |
| --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [**Cloudflare Durable Objects**](#cloudflare-durable-objects) (recommended) | [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) (real-time) | Cloudflare KV                                                      |
| [**Cloudflare Workers / Pages**](#cloudflare-workers--pages)                | Polling                                                                             | Filesystem or Cloudflare KV                                        |
| [**NuxtHub**](#nuxthub)                                                     | Polling (WebSocket with Durable)                                                    | Filesystem                                                         |

**Cloudflare Durable Objects** is recommended for the best user experience, as it enables instant update notifications via WebSockets.

## Deployment Skew

For gradual Worker deployments, configure [Version Affinity](https://developers.cloudflare.com/workers/versions-and-deployments/gradual-deployments/version-affinity/). A zone Transform Rule must set `Cloudflare-Workers-Version-Key` from a stable cookie, user ID, or IP address before the request reaches the Worker. This keeps page and asset requests on the same Worker version.

For regular deployments, a [Cache Rule with a status-code TTL](https://developers.cloudflare.com/cache/how-to/configure-cache-status-code/) can set 404 responses under your full build asset path to `no-store`. Scope the rule to your application hostname and `/_nuxt/*`, including any Nuxt `app.baseURL` prefix.

The module keeps successful build asset requests on Cloudflare's free static asset path. When a controlled browser receives a build asset 404, the module's service worker retries it through a dedicated non-asset endpoint. Cloudflare's normal asset-miss fallback sends only that recovery request to the Worker, which rechecks the asset binding without cache and marks a persistent miss as `no-store`. The module does not enable `assets.run_worker_first`.

For Cloudflare Module and Durable Object presets, the module configures `assets.run_worker_first` for the Nuxt build asset prefix, such as `/_nuxt/*`. This lets the Worker retry a cached asset miss after a deploy without routing unrelated static assets through Worker code. Requests matching this prefix count as Worker invocations.

## Long-Lived Asset Storage

When using Cloudflare directly, your local wrangler instance writes files to your default Cloudflare KV namespace during build time. As a fallback and when using NuxtHub, the module can also use filesystem storage with CI/CD caching.

For filesystem storage, see [Storage Configuration](/docs/skew-protection/guides/storage-configuration#github-actions) for setting up caching in your CI/CD pipeline.

**KV binding.** To use a dedicated KV namespace for Nuxt Skew Protection, create a KV namespace in your Cloudflare dashboard and bind it to your Worker or Pages project as `SKEW_PROTECTION`.

Then configure the module to use the binding:

```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // ...
  nitro: {
    // ...
    cloudflare: {
      wrangler: {
        kvNamespaces: [
          { binding: 'SKEW_PROTECTION', id: 'your-kv-namespace-id' } // Get ID from Cloudflare dashboard
        ]
      }
    }
  },
})
```

## Cloudflare Durable Objects

Cloudflare Durable Objects support **WebSockets** for real-time update notifications, giving instant updates to users.

```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['nuxt-skew-protection'],

  nitro: {
    preset: 'cloudflare-durable',
    experimental: {
      websocket: true, // Required for WebSocket strategy
    },
  },
})
```

::note
WebSocket strategy requires `nitro.experimental.websocket: true` and the `cloudflare-durable` preset.
::

## Cloudflare Workers / Pages

Cloudflare Workers / Pages use **polling** for update detection since they don't support persistent connections.

```ts [nuxt.config.ts]
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['nuxt-skew-protection'],

  nitro: {
    preset: 'cloudflare',
  },

  skewProtection: {
    updateStrategy: 'polling', // Auto-detected
  },

  experimental: {
    checkOutdatedBuildInterval: 5 * 60 * 1000, // 5 minutes
  },
})
```

## NuxtHub

[NuxtHub](https://hub.nuxt.com) simplifies Cloudflare deployment by automatically managing KV namespaces, databases, and other resources. By default, the module uses **filesystem storage** which works with NuxtHub deployments.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
    '@nuxthub/core',
    'nuxt-skew-protection',
  ],

  hub: {
    kv: true, // Enable KV for your app
  },

  skewProtection: {
    // Uses filesystem storage by default - no configuration needed!
  },
})
```

**Real-time updates with NuxtHub.** To enable real-time updates with NuxtHub, enable `websocket` in your hub configuration:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
    '@nuxthub/core',
    'nuxt-skew-protection',
  ],

  nitro: {
    experimental: {
      websocket: true,
    },
  },

  hub: {
    kv: true,
    websocket: true, // Enable WebSocket support
  },
})
```

For storage, see [Storage Configuration](/docs/skew-protection/guides/storage-configuration#github-actions) for setting up caching in your CI/CD pipeline.