Migrate from NuxtHub to Cloudflare directly

#javascript #serverless #database #devops

Ok, so I just switched nuxtcharts.com from NuxtHub to Cloudflare directly.

I created a new repo using the pnpm create command shown on the CF page to compare the source files with my existing repository. https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/

✅ What I Did:

wrangler.jsonc
worker-configuration.d.ts (not that important if you just want it to work for now)
Removed everything NuxtHub related.
Installed Nuxt Content manually, since it was shipped with the NuxtHub module.
Changed my useDB composable to use the Cloudflare binding directly.

I'm currently testing if everything is working fine.

Please let me know if you have suggestions or recommendations.

Let me share some more detailed information.

My new useDB() composable:

//server/utils/database.ts
// old
// export function useDB() {
//   return drizzle(hubDatabase(), { schema })
// }

// new
import { drizzle } from 'drizzle-orm/d1'
import * as schema from '../database/schema'

export const tables = schema

export function useDB() {
  const event = useEvent()
  const d1 = event.context.cloudflare?.env?.DB

  if (!d1) {
    throw new Error('❌ D1 binding "DB" not found. 
Are you running via `npm run dev` with nitro-cloudflare-dev
or `wrangler pages dev`?')
  }

  // 3. Return Drizzle instance initialized with D1 binding
  return drizzle(d1, { schema })
}

//nuxt.config.ts
nitro: {
  preset: 'cloudflare-pages',
  experimental: {
    asyncContext: true
  },
  cloudflare: {
    deployConfig: true,
    nodeCompat: true
  }
}

/**
 * wrangler.jsonc
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "nuxt-charts-site",
  "compatibility_date": "2025-11-27",
  "pages_build_output_dir": "./dist",
  "observability": {
    "enabled": true,
  },
  /**
   * R2 Buckets
   * https://developers.cloudflare.com/r2/api/workers/workers-api-reference/
   */
  "r2_buckets": [
    {
      "binding": "BLOB",
      "bucket_name": "your-r2-bucket-name",
    },
  ],
  /**
   * D1 Databases
   * https://developers.cloudflare.com/d1/
   */
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "your-database-name",
      "database_id": "xx", // find it in CF Dashboard /workers/d1 and copy binding from dropdown options for your database
    },
  ],
}