DevOps & CloudTutorials

Deploying Nuxt 3 to Cloudflare Workers: The Complete Guide

Deploy your Nuxt 3 app to the edge with Cloudflare Workers — zero cold starts, global distribution, and generous free tier.

Mbeah Essilfie

June 13, 2026 at 06:03 AM

8 min read 2062 views

Deploying Nuxt 3 to Cloudflare Workers: The Complete Guide

Why Cloudflare Workers?

No cold starts — V8 isolates, not containers
Global by default — Runs in 300+ locations
Generous free tier — 100,000 requests/day free
First-class Nuxt support — Native preset

Setup

# In your Nuxt project
pnpm add -D wrangler

Configure the preset:

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages',
  },
})

Create a wrangler config:

# wrangler.toml
name = "my-nuxt-app"
compatibility_date = "2024-01-01"
pages_build_output_dir = ".output/public"

[vars]
NUXT_PUBLIC_SITE_URL = "https://myapp.pages.dev"

Build and Deploy

# Build for Cloudflare
pnpm build

# Preview locally (uses miniflare)
pnpm wrangler pages dev .output/public

# Deploy
pnpm wrangler pages deploy .output/public

Environment Variables and Secrets

# Set secrets (never committed to code)
wrangler pages secret put DATABASE_URL
wrangler pages secret put AUTH_SECRET

Access them in server routes:

export default defineEventHandler((event) => {
  const { DATABASE_URL } = event.context.cloudflare.env
  // or use process.env.DATABASE_URL (Nuxt handles mapping)
})

Your app is now running on the edge — every request is handled by the nearest Cloudflare data center to your user. Response times drop to single-digit milliseconds for cached content.

Bindings: D1, R2, KV

Cloudflare offers edge-native services:

# wrangler.toml
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "xxx"

[[r2_buckets]]
binding = "STORAGE"
bucket_name = "uploads"

[[kv_namespaces]]
binding = "CACHE"
id = "xxx"

CI/CD with GitHub Actions

name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - run: pnpm install
      - run: pnpm build
      - uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          projectName: my-nuxt-app
          directory: .output/public

Edge deployment is the future. With Nuxt and Cloudflare, you're already there.