N
Nuxt•2mo ago
Sul

Cloudflare Pages settings

Started using Nuxt 4 for a project and wanted to deploy to Cloudflare Pages but I just can’t seem to get the settings right. If anyone has done it successfully could you share your deployment settings in Cloudflare please. 🙏🏼
6 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Sul. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To successfully deploy a Nuxt 4 project to Cloudflare Pages, here are the recommended settings and steps based on the official documentation: 1. Build Command Set your build command in Cloudflare Pages to: 
nuxi build --preset=cloudflare_pages
nuxi build --preset=cloudflare_pages
Or, you can configure the preset in your nuxt.config.ts: 
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages',
  },
});
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_pages',
  },
});
Either approach will ensure the build output is compatible with Cloudflare Pages Deploy to Cloudflare Pages. 2. Output Directory Set the output directory to .output/public in your Cloudflare Pages project settings. This is where Nuxt will generate the static files for deployment. 3. D1 Database (if using Nuxt Content or server features) If your project uses Nuxt Content or needs a database, you must create a Cloudflare D1 database and connect it to your project using the DB binding name (default). This is configured in the Cloudflare dashboard and, if needed, in your nuxt.config.ts Deploy to Cloudflare Pages. 4. Environment Variables Add any required environment variables (such as API keys or database URLs) in the Cloudflare Pages dashboard under "Environment Variables". 5. Cloudflare Dashboard Settings - Minification and Security Options:
Disable the following options in Cloudflare to avoid issues with Nuxt hydration and rendering: - Speed > Optimization > Content Optimization > Disable "Rocket Loader™" - Speed > Optimization > Image Optimization > Disable "Mirage" - Scrape Shield > Disable "Email Address Obfuscation"
These settings prevent Cloudflare from injecting scripts that could interfere with your Nuxt app CDN Proxy. --- Summary of Cloudflare Pages settings: - Build command: nuxi build --preset=cloudflare_pages - Output directory: .output/public - Environment variables: As needed - D1 database: If required, bind as DB - Disable Rocket Loader, Mirage, and Email Obfuscation in Cloudflare dashboard Following these steps should allow you to deploy your Nuxt 4 project to Cloudflare Pages successfully. If you encounter specific errors, please provide details for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@425329706741792779> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
MatthewEnderle
MatthewEnderle•5w ago
Most of the issues I ran into were using modules that Cloudflare workers/pages doesn't support. I had one that was a color library once and had to replace it.
isakwang
isakwang•5w ago
How complex is the app at this point? If you just want it working you could scaffold a new one using the cloudflare cli and just copy stuff over. Not sure if their template is Nuxt 4 yet, but the codemod solves that
Sul
SulOP•4w ago
Honestly I’m a complete muppet. I was adding a simple Nuxt app as a worker. I just saw the tab to select ‘pages’ and that worked with zero issues.
Sul
SulOP•4w ago

Did you find this page helpful?