N
Nuxt•2mo ago
Dagy

How To Cloudflare workers with Nuxt 3 ?

Hello community, I’m trying to deploy a nuxt site to cloudflare. I used the nuxt starter from the cli. But I haven’t been able to use the workers for the /server/api together with the hono library. I get internal server error. And not functionality for the server/api I haven’t this in my nuxt.config export default defineNuxtConfig({ compatibilityDate: "2024-11-01", devtools: { enabled: true }, nitro: { preset: "cloudflare-module", // ← Correct preset here }, modules: ["nitro-cloudflare-dev"], vite: { optimizeDeps: { include: ["hono"], }, }, }); I have this in my wrangler { "$schema": "node_modules/wrangler/config-schema.json", "name": "test-1", "compatibility_date": "2025-03-03", "compatibility_flags": ["nodejs_compat"], // ← Required "main": "./.output/server/index.mjs", "assets": { "binding": "ASSETS", "directory": "./.output/public/" }, "r2_buckets": [{ "binding": "BUCKET", "bucket_name": "your-bucket-name" }], "kv_namespaces": [{ "binding": "KV", "id": "your-kv-id" }], "d1_databases": [ { "binding": "DB", "database_name": "your-db-name", "database_id": "your-db-id" } ], "ai": { "binding": "AI" }, "observability": { "enabled": true } } This my workers code: // server/api/workers.js import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => { const name = c.req.query("name") || "World"; return c.json({ greeting: Hello, ${name}! }); }); export default app;
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Dagy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll help you deploy your Nuxt 3 application with Cloudflare Workers and Hono. There are a few issues with your current setup that need to be addressed: Preset Configuration First, the preset you're using (cloudflare-module) doesn't appear to be a standard Nitro preset. For Cloudflare Workers, you should use either cloudflare or cloudflare_pages preset: 
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare',
  }
})
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare',
  }
})
Server API Integration with Hono For integrating Hono with Nuxt's server API, you need to properly structure your API handler. Here's how you can fix your workers.js file: 
// server/api/workers.js
import { Hono } from "hono";
import { defineEventHandler } from 'h3'

const app = new Hono();

app.get("/", (c) => {
  const name = c.req.query("name") || "World";
  return c.json({ greeting: `Hello, ${name}!` });
});

export default defineEventHandler((event) => {
  return app.fetch(event.node.req)
})
// server/api/workers.js
import { Hono } from "hono";
import { defineEventHandler } from 'h3'

const app = new Hono();

app.get("/", (c) => {
  const name = c.req.query("name") || "World";
  return c.json({ greeting: `Hello, ${name}!` });
});

export default defineEventHandler((event) => {
  return app.fetch(event.node.req)
})
Note that I've fixed the template string syntax and wrapped the Hono app with defineEventHandler to properly integrate with Nuxt's server handling. Database Configuration If you're using Cloudflare D1 database with Nuxt Content, you'll need to configure it in your Nuxt config: 
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare',
  },
  content: {
    database: {
      type: 'd1',
      binding: 'DB'
    }
  }
})
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare',
  },
  content: {
    database: {
      type: 'd1',
      binding: 'DB'
    }
  }
})
Cloudflare-specific Considerations When deploying to Cloudflare, be aware of these important points: 1. Make sure to disable certain Cloudflare optimizations that can interfere with Nuxt: - Disable "Rocket Loader™" - Disable "Mirage" - Disable "Email Address Obfuscation"
These settings can cause hydration errors in your Nuxt application. 2. For hybrid rendering (some static pages, some dynamic API routes), you can use route rules: 
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/api/*': { ssr: true }
  }
})
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/api/*': { ssr: true }
  }
})
If you're still encountering issues, you might want to check the Cloudflare Workers logs for more specific error messages. The "internal server error" you're seeing could be related to how Hono is being integrated with the Nuxt server handlers. For more information on deploying Nuxt to Cloudflare, check out the Nuxt deployment documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@747987392048136263> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?