Guides

Cloudflare Deployment

Copy for LLMs
Last updated by
Harlan Wilton
 in fix: NuxtHub & Cloudflare storage improvements.

Introduction

Cloudflare provides several deployment options for Nuxt applications:

Deployment OptionUpdate StrategyStorage Strategy
Cloudflare Durable Objects (recommended)WebSocket (real-time)Cloudflare KV
Cloudflare Workers / PagesPollingFilesystem or Cloudflare KV
NuxtHubPolling (WebSocket with Durable)Filesystem

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

KV Binding: SKEW_PROTECTION

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:

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, providing instant updates to users.

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
    },
  },
})
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.

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

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

  nitro: {
    preset: 'cloudflare',
  },

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

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

NuxtHub

NuxtHub simplifies Cloudflare deployment by automatically managing KV namespaces, databases, and other resources. By default, the module uses filesystem storage which works seamlessly with NuxtHub deployments.

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:

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

Edit this page
Markdown For LLMs
Did this page help you?

Notifying Users

React to version updates using useSkewProtection() composable.

Storage Configuration

Configure persistent storage for build assets across deployments.