Cloudflare has several deployment options for Nuxt applications:
| Deployment Option | Update Strategy | Storage |
|---|---|---|
| Cloudflare Durable Objects (recommended) | WebSocket (real-time) | Cloudflare KV |
| Cloudflare Workers / Pages | Polling | Filesystem or Cloudflare KV |
| NuxtHub | Polling (WebSocket with Durable) | Filesystem |
Cloudflare Durable Objects is recommended for the best user experience, as it enables instant update notifications via WebSockets.
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.
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:
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 support WebSockets for real-time update notifications, giving instant updates to users.
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['nuxt-skew-protection'],
nitro: {
preset: 'cloudflare-durable',
experimental: {
websocket: true, // Required for WebSocket strategy
},
},
})
nitro.experimental.websocket: true and the cloudflare-durable preset.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 simplifies Cloudflare deployment by automatically managing KV namespaces, databases, and other resources. By default, the module uses filesystem storage which works with NuxtHub deployments.
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!
},
})
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.