Nuxt3 中文课程《实战全栈开发简书》限时优惠
Deploy

Cloudflare

Deploy your Nuxt Application to Cloudflare infrastructure.

Cloudflare Pages

Zero Configuration ✨
Integration with Cloudflare Pages is possible with zero configuration, learn more.

Git Integration

If you use the GitHub/GitLab integration with Cloudflare Pages, no configuration is required. Pushing to your repository will automatically build your project and deploy it.

Nuxt will detect the environment to set the correct Server/Nitro preset.

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

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

Route matching

On CloudFlare Pages, if an HTML file is found with a matching path to the current route requested, it will serve it. It will also redirect HTML pages to their extension-less counterparts: for instance, /contact.html will be redirected to /contact, and /about/index.html will be redirected to /about/.

To match Cloudflare route matching rules, set the nitro option autoSubfolderIndex to false.

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

Direct Upload

Alternatively, you can use wrangler to upload your project to Cloudflare.

In this case, you will have to set the preset manually.

  1. Build your project for Cloudflare Pages:
    Terminal
    npx nuxi build --preset=cloudflare_pages
    
  2. Deploy, it will ask you to create a project for the first time:
    Terminal
    wrangler pages deploy dist/
    

Disable Auto Minify

Make sure to disable the minification of HTML, CSS and JavaScript in CloudFlare -> Speed -> Optimization -> Auto Minify to avoid any Vue hydration.

Disable Cloudflare auto minify

Learn more

Head over Nitro documentation to learn more about the Cloudflare deployment preset.
Head over CloudFlare Pages documentation to learn more about it.

Templates

Nuxt Todos Edge

A todos application with user authentication, SSR and Cloudflare D1.

Atinotes

An editable website with universal rendering based on Cloudflare KV.

Learn more

Head over Nitro documentation to learn more about the cloudflare deployment preset.