Developer Toolbox
Back to Articles
Deployment

Nuxt on Cloudflare Pages

2025-11-20
8 min read

This site uses a hybrid Nuxt 4 deployment: public pages are prerendered into dist, while a Pages Function forwards only /api requests to Nitro. That split lowers runtime work, but it makes static-output details such as 404.html, robots.txt, redirects, and headers part of application correctness.

1. Why Cloudflare Pages for Nuxt?

The repository builds Nuxt with Nitro's cloudflare-pages preset. Route rules prerender public pages, disable indexing for account and legal workflow pages where appropriate, and leave server endpoints dynamic. The generated Pages Function has routes for /api and /api/*; ordinary HTML and hashed assets are served as static files.

  • Static delivery: HTML, JavaScript, CSS, sitemap files, and policy files are deployed from dist.
  • Dynamic API: authentication, billing, AI, and other server endpoints execute through the Function and count against applicable Workers limits.
  • Bindings: D1 and other runtime values are read from the Cloudflare request context; local process.env assumptions are not sufficient in production.

2. Edge Caching & Cache-Control

Hashed Nuxt assets can be cached for a long time because a content change creates a new filename. HTML and policy files need shorter, deliberate caching so fixes can propagate. This project gives /robots.txt a one-hour cache with revalidation and relies on Pages' static asset behavior for prerendered HTML.

🚀 Optimization Tip

Do not add one cache header to every route. Account state, checkout responses, and API output have different privacy and freshness requirements from immutable assets. Verify response headers on both the unique deployment URL and the custom domain.

3. The 404 and robots.txt Trap

Cloudflare Pages documents that a project without a top-level 404.html is treated as a single-page application: unknown paths fall back to the root page with a 200 response. That can turn a missing /robots.txt into HTML, and it can make nonexistent URLs look indexable. The fix is to ship a real top-level 404 file, prerender robots into the output, and define explicit legacy redirects in _redirects.

4. Release Verification

  1. Build and inspect dist/404.html, dist/robots.txt, dist/_headers, and dist/_redirects.
  2. Confirm /robots.txt returns 200, text/plain, valid rules, and the sitemap URL for normal, Googlebot, and Mediapartners user agents.
  3. Confirm legacy /en/... routes return 301 to the default English path and an arbitrary unknown route returns 404.
  4. Compare the deployment URL and custom domain for status, current asset hashes, and a real tool interaction.
  5. Only then run Search Console live URL inspection and request indexing for representative pages.

5. Security at the Edge

Cloudflare provides network security features, but availability is not guaranteed by deployment alone. WAF capabilities, rate limits, authentication, secrets management, and application-level validation must be configured and tested for the selected plan.

Conclusion

Cloudflare Pages and Workers are one deployment option for Nuxt. Evaluate build limits, Worker quotas, bindings, observability, regional dependencies, and cost against the needs of the application.

Official References