When I first tried deploying a Nuxt app to Cloudflare, I wanted speed, simplicity, and control—here’s the guide I wish I had back then.

Why Cloudflare + Nuxt?

Cloudflare is awesome for deploying Nuxt apps. Here's why:

• Your app runs on Cloudflare Workers, which means it's scalable and deployed right at the edge (close to your users) with super-low cold-start times.
• The Nuxt community has built first-class support for Cloudflare.
  • Nuxt is actually one of the few frameworks specifically optimized to work with Cloudflare.
  • Under the hood, Nuxt uses something called unenv to make sure everything plays nicely with the Workers runtime.

The NuxtHub Story

You might have heard of NuxtHub—it's an amazing tool for deploying Nuxt apps to Cloudflare. With just one command (npx nuxthub deploy), you can get your app up and running. Pretty cool, right?

NuxtHub offers:

• Super simple deployments with a single command.
• Great developer experience with strong support for Cloudflare (D1, KV, AI, R2, Vectorize) through the @nuxt-hub/core module.
• Cloudflare bindings setup, and database migrations.
• Dev tools to manage your database, blob storage, and KV storage while you're developing.

Where NuxtHub Falls Short: Why I Built Nuxflare

While NuxtHub is great, it has a few limitations that were bugging me:

• You don't have full control over how your resources are deployed.
  • You can't deploy certain things like Durable Objects (a powerful Cloudflare offering for real-time apps and persisting state in serverless edge deployments), queues, cron triggers, etc.
  • You can't set up custom Cloudflare bindings (e.g., service bindings).
• While they have a generous free tier now, that could change anytime.

That's why I created Nuxflare. I wanted to keep all the great stuff from NuxtHub but give developers complete control over their deployments.

Here's what Nuxflare offers:

• It's completely open-source.
• It supports multi-stage deployments (dev, production, staging, etc.).
• It works with the NuxtHub core module, so you still get all those great developer tools and features.
• It uses open-source tools like SST.dev and Pulumi for deploying and managing resources (infrastructure as code).
  • Using Cloudflare's APIs and Wrangler under the hood, so you don't have to expose access to your Cloudflare account.
• Bonus: You can mix in components from other cloud providers like AWS, Neon, PlanetScale, Azure, or Vercel (I'll write more about using SST.dev with Nuxflare soon).

Think of NuxtHub as having two parts: their open-source module (the good stuff for developers) and their deployment platform. Nuxflare lets you keep using that first part while giving you more flexibility with the deployment side.

Coming soon: Our next major Nuxflare release will include GitHub Actions integration and even better NuxtHub compatibility.

Ready to Deploy?

I'll walk you through the whole process of getting your Nuxt app up and running on Cloudflare using Nuxflare.

1. Clone an Example NuxtHub Project

First, let's grab a template that shows what Nuxflare can do.

This template demonstrates NuxtHub core features like AI, Blob, Database, Cache, KV, and Vectorize. We can get all this to work with zero config using Nuxflare.

git clone https://github.com/RihanArfan/chat-with-pdf.git
cd chat-with-pdf
npm install

2. Set Up Nuxflare

Run this command and follow the prompts:

npx nuxflare init

It'll ask you for:

• Your project name.
• Your preferred package manager (npm, yarn, or pnpm).

This creates a special file called sst.config.ts that handles your deployment with SST.dev.

3. Get Your Cloudflare Access Ready

1. Create an API token using this link.
2. Set it as an environment variable in your shell:
   export CLOUDFLARE_API_TOKEN=your_token_here
   

4. Deploy Your App

Ready to go live? Run this:

npx nuxflare deploy --stage dev

You can specify different stage names to deploy copies of your app. This is useful when deploying development, staging, production, or more environments in the same account.

Working on Your App Locally

When you're developing, you can run the Nuxt dev server manually:

npm run dev

To connect to your remote Cloudflare resources (e.g., database, KV, storage, AI):

npx nuxflare dev --stage dev

This starts up your development server and connects it to all your Cloudflare services.

Under the hood, Nuxflare sets the NUXT_HUB_PROJECT_URL and NUXT_HUB_PROJECT_SECRET_KEY environment variables to connect to your remote Cloudflare resources.

Cleaning Up

Want to remove all resources? Just run:

npx nuxflare remove --stage dev

What's Next?

I'm working on some exciting updates including GitHub Actions support and better NuxtHub compatibility. Stay tuned!

If you're building something serious, check out Nuxflare Pro. It comes with extras like team auth, role-based access control, emails, payments, notifications and real-time features.

Need help? Join our Discord community—we're always happy to help out!

Building something cool with Nuxflare? I'd love to hear about it! Drop me a note or share it in our Discord.