Cloudflare

Cloudflare has several deployment options for Nuxt applications:

Use Cloudflare Durable Objects for real-time update notifications via WebSockets.

Deployment Skew

For gradual Worker deployments, configure 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 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.

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

The module stores build assets on the filesystem by default. For filesystem storage, see Storage Configuration for setting up caching in your CI/CD pipeline. This also works with NuxtHub.

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 set the module storage to the cloudflare-kv-binding driver:

import { defineNuxtConfig } from 'nuxt/config'

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

At build time, the module reads the namespace ID from kv_namespaces in the Nitro config or in wrangler.json, wrangler.jsonc, or wrangler.toml. It then writes assets through Wrangler, so the build environment needs Wrangler v4 and Cloudflare credentials. If the binding is not in either place, set storage.namespaceId.

Cloudflare Durable Objects

Configure the cloudflare-durable preset and enable WebSockets:

import { defineNuxtConfig } from 'nuxt/config'

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

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

Cloudflare Workers / Pages

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

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 manages Cloudflare resources for your deployment. The module uses filesystem storage by default with NuxtHub.

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:

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 for setting up caching in your CI/CD pipeline.