Deploying a Nuxt Static Site to Cloudflare Pages: A Complete Guide

If you’re building with Nuxt and want a fast, globally distributed static site, Cloudflare Pages is one of the easiest and most reliable platforms you can use. In this guide, we’ll walk through the end-to-end process of generating and deploying a Nuxt static site on Cloudflare Pages.

目次

Overview

Cloudflare Pages is a serverless, Git-first hosting platform optimized for static sites.
Nuxt, starting from v3, supports static site generation via nuxi generate, making the combination extremely simple.

This article explains everything from project setup to automated deployments.

Prerequisites

What you need before starting

  • A Nuxt project (Nuxt 3 recommended)
  • GitHub or GitLab repository
  • Cloudflare account
  • Node.js v18+ installed locally

Step 1: Configure Nuxt for Static Site Generation

Nuxt automatically supports multiple rendering modes. To deploy on Cloudflare Pages, set the app to static generation.

In nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    preset: "static"
  }
})

Then generate your static files:

npx nuxi generate

This creates a .output/public directory containing the static assets Cloudflare Pages will serve.

Step 2: Prepare Your Repository

Ensure your generated output is not committed

Cloudflare Pages will run the build process for you, so do not commit .output/.

Add this to .gitignore if necessary:

.output

Push your Nuxt project to GitHub or GitLab.

Step 3: Create a Cloudflare Pages Project

  1. Log in to Cloudflare
  2. Go to Pages
  3. Select Create a project
  4. Choose your GitHub/GitLab repository
  5. Configure build settings:

Recommended build settings

  • Framework preset: None (Nuxt will work without selecting one)
  • Build command: npm run generate
  • Build output directory: .output/public
  • Node version: 18 or later (Cloudflare auto-detects this)

Click Save and Deploy.

Cloudflare Pages will now:

  • Install dependencies
  • Build your Nuxt project
  • Generate static files
  • Deploy globally

Step 4: Verify Your Deployment

Once deployment completes, Cloudflare provides:

  • A production URL
  • A preview URL for each commit
  • Deployment logs

Open your production URL to ensure everything looks correct.

Step 5: Set Up Custom Domains (Optional)

If you want your own domain:

  1. Open the Cloudflare Pages project
  2. Go to Custom Domains
  3. Add your domain
  4. Cloudflare will automatically configure DNS routing

This gives you HTTPS, caching, and performance optimizations for free.

Step 6: Enable Automatic Deployments

By default, Cloudflare Pages redeploys every time you push to the main branch.
This is ideal for a static Nuxt workflow—simply commit your changes and everything updates automatically.

Step 7: Optimize for Performance

Recommended optional tweaks

  • Enable Cloudflare Cache for faster global delivery
  • Add Image Optimization using Nuxt’s image module
  • Use cloudflare preset in Nuxt when server functions are needed

These improvements ensure your Nuxt site loads extremely fast worldwide.

Summary

Deploying a Nuxt static site on Cloudflare Pages is simple, fast, and scalable.
The essential steps were:

  • Configure Nuxt for static generation
  • Push your project to GitHub/GitLab
  • Connect the repo in Cloudflare Pages
  • Set build command → npm run generate
  • Set output directory → .output/public
  • Deploy instantly with global CDN performance

This workflow gives you high-speed hosting with minimal setup and automatic deployments—perfect for modern static sites.

Copied title and URL