Deploy a Nuxt.js app to Cloudflare Pages

• Prerequisites
• Step 1: Prepare Your Nuxt.js Application
• Step 2: Set Up Your Project on Cloudflare Pages
• Step 3: Custom Domain Configuration (Optional)
• Step 4: Continuous Deployment
• You're done

Cloudflare Pages is a JAMstack platform for frontend frameworks and static site generators, offering developers an easy-to-use service for deploying sites directly from a Git repository. With its global network, Cloudflare Pages ensures your Nuxt.js app loads quickly and reliably around the world. Here's how you can deploy your Nuxt.js application to Cloudflare Pages, leveraging the platform's efficiency and scalability.

This article follows on from our article on how to deploy a Next.js App to Cloudflare Pages.

¶Prerequisites

• A Nuxt.js application you wish to deploy.
• Your project code hosted on a Git repository (GitHub, GitLab, or Bitbucket).
• A Cloudflare account. If you don't have one, you can sign up for free.

¶Step 1: Prepare Your Nuxt.js Application

Before deploying, ensure your Nuxt.js app is ready for production:

1. Build Configuration: Verify your nuxt.config.js file has the correct settings for a production build. For most projects, the default configuration should suffice. However, you can customize settings like target: 'static' for full static generation, which is ideal for Cloudflare Pages.

2. Local Build Test: Run npm run build or yarn build to generate a production version of your app. This process creates a dist folder (for static targets) containing the production-ready files. Ensure there are no build errors.

¶Step 2: Set Up Your Project on Cloudflare Pages

1. Connect Your Git Repository:

   • Log in to your Cloudflare dashboard and navigate to the Pages section.
   • Click the "Create a project" button.
   • Choose the Git provider where your Nuxt.js app is hosted and authorize Cloudflare to access your account.
   • Select the repository that contains your Nuxt.js project.

2. Configure Your Build Settings:

   • Once your repository is selected, you'll need to configure the build settings. Cloudflare Pages will attempt to auto-detect settings for popular frameworks. For Nuxt.js, you may need to specify them manually.
   • Build command: Enter npm run build or yarn build depending on your package manager.
   • Build output directory: Type dist if you're using Nuxt's static target. For server-side rendering applications, consider using Nuxt's ssr: false mode or explore Cloudflare Workers for SSR support.
   • Environment variables (optional): Set any environment variables your build might require, like NODE_ENV=production.

3. Finalize and Deploy:

   • After configuring your build settings, click the "Save and Deploy" button. Cloudflare Pages will now clone your repository, run the build command, and deploy the dist directory to its global network.

¶Step 3: Custom Domain Configuration (Optional)

Cloudflare Pages provides a .pages.dev subdomain for your project, but you can also configure a custom domain:

1. Add a Custom Domain: In the project dashboard, navigate to the "Settings" tab, find the "Custom domains" section, and click "Add custom domain".
2. Verify Domain Ownership: Follow the instructions to verify domain ownership by adding DNS records through your domain registrar or Cloudflare if your domain is managed there.
3. SSL Configuration: Cloudflare automatically provisions an SSL certificate for your custom domain, ensuring your Nuxt.js app is served over HTTPS.

¶Step 4: Continuous Deployment

Cloudflare Pages automatically sets up continuous deployment for your project:

• Automatic Builds: Future commits to the main branch (or a branch you specify) will trigger new builds and deployments automatically.
• Preview Deployments: Pull requests will generate preview deployments, allowing you to test changes in a live environment before merging them into your production branch.

¶You're done

Deploying a Nuxt.js app to Cloudflare Pages combines the versatility of Nuxt.js with the simplicity and power of Cloudflare's global network. Whether you're launching a static site, dynamic application, or something in-between, Cloudflare Pages offers an efficient, scalable platform that brings your projects to life with minimal setup. By following these steps, you're now equipped to deploy and scale your Nuxt.js applications effortlessly, ensuring they're fast, secure, and accessible worldwide.