---
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-05-07T14:15:25.352Z"
---

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

<table>
<thead>
  <tr>
    <th>
      Deployment Option
    </th>
    
    <th>
      <a href="/docs/skew-protection/guides/update-strategies">
        Update Strategy
      </a>
    </th>
    
    <th>
      <a href="/docs/skew-protection/api/config#storage-storageoptions">
        Storage
      </a>
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="#cloudflare-durable-objects">
        <strong>
          Cloudflare Durable Objects
        </strong>
      </a>
      
       (recommended)
    </td>
    
    <td>
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" rel="nofollow">
        WebSocket
      </a>
      
       (real-time)
    </td>
    
    <td>
      Cloudflare KV
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="#cloudflare-workers--pages">
        <strong>
          Cloudflare Workers / Pages
        </strong>
      </a>
    </td>
    
    <td>
      Polling
    </td>
    
    <td>
      Filesystem or Cloudflare KV
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="#nuxthub">
        <strong>
          NuxtHub
        </strong>
      </a>
    </td>
    
    <td>
      Polling (WebSocket with Durable)
    </td>
    
    <td>
      Filesystem
    </td>
  </tr>
</tbody>
</table>

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

## 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#filesystem-storage) 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
    },
  },
})
```

<callout icon="i-ph-info-duotone">

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

</callout>

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