Cloudflare

Deploy your Nuxt Application to Cloudflare infrastructure.

Cloudflare Pages

Zero Configuration ✨
Integration with Cloudflare Pages is possible with zero configuration, learn more.
Checkout the @nuxthub/core module to build full-stack Nuxt applications with Cloudflare, learn more on hub.nuxt.com.

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
    npx wrangler pages deploy dist/

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

Atidone

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

Atinotes

An editable website with universal rendering based on Cloudflare KV.

Atidraw

Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI.

Nuxt Image Gallery

An image gallery to upload, edit and share your images to the world, with Cloudflare R2.

Learn more

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

Clever Cloud

Deploy your Nuxt Application to Clever Cloud infrastructure.

Deno Deploy

Deploy your Nuxt Application to Deno Deploy infrastructure.