Deploy Nuxt Application to Cloudflare

Nuxt Configuration¶

Route matching¶

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

Fix Cloudflare 308 Trailing Slash Redirect Issue (/xxx to /xxx/)

Node Version¶

touch .nvmrc

22.14.0

Cloudflare Configuration¶

Nuxt can work with third-party content that is not generated or created by Nuxt itself. But sometimes such content can cause problems. Accordingly, you should make sure that the following options are unchecked / disabled in Cloudflare. Otherwise, unnecessary re-rendering or hydration errors could impact your production application.

Speed > Optimization > Content Optimization > Disable "Rocket Loader™"
Speed > Optimization > Image Optimization > Disable "Mirage"
Scrape Shield > Disable "Email Address Obfuscation"

With these settings, you can be sure that Cloudflare won't inject scripts into your Nuxt application that may cause unwanted side effects.

Cloudflare Build¶

Build configuration¶

Build command

To leverage server-side rendering on the edge, set the build command to: npx nuxt build.

To statically generate your website, set the build command to: npx nuxt generate.

Build output

dist

Navigation