Nuxt

Nuxt Open external link is a web framework making Vue.js-based development simple and powerful.

In this guide, you will create a new Nuxt application and deploy it using Cloudflare Pages.

​​ Create a new project using the create-cloudflare CLI (C3)

The create-cloudflare CLI (C3) will configure your Nuxt site for Cloudflare Pages. Run the following command in your terminal to create a new Nuxt site:

$ npm create cloudflare@latest my-nuxt-app -- --framework=nuxt

C3 will ask you a series of setup questions and create a new project with nuxi (the official Nuxt CLI) Open external link . C3 will also install the necessary adapters along with the Wrangler CLI.

After creating your project, C3 will generate a new my-nuxt-app directory using the default Nuxt template, updated to be fully compatible with Cloudflare Pages.

When creating your new project, C3 will give you the option of deploying an initial version of your application via Direct Upload. You can redeploy your application at any time by running following command inside your project directory:

$ npm run deploy

​​ Configure and deploy a project without C3

To deploy a Nuxt project without C3, follow the Nuxt Get Started guide Open external link . After you have set up your Nuxt project, choose either the Git integration guide or Direct Upload guide to deploy your Nuxt project on Cloudflare Pages.

​​ Git integration

In addition to Direct Upload deployments, you can deploy projects via Git integration. Git integration allows you to connect a GitHub or GitLab repository to your Pages application and have your Pages application automatically built and deployed after each new commit is pushed to it.

Setup requires a basic understanding of Git Open external link . If you are new to Git, refer to GitHub’s summarized Git handbook Open external link on how to set up Git on your local machine.

​​ Create a GitHub repository

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
$ git init
$ git add .
$ git commit -m "Initial commit"

$ git branch -M main
$ git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
$ git push -u origin main

​​ Create a Pages project

1. Log in to the Cloudflare dashboard Open external link and select your account.
2. Go to Workers & Pages > Create application > Pages > Connect to Git and create a new Pages project.

You will be asked to authorize access to your GitHub account if you have not already done so. Cloudflare needs this so that it can monitor and deploy your projects from the source. You may narrow access to specific repositories if you prefer; however, you will have to manually update this list within your GitHub settings Open external link when you want to add more repositories to Cloudflare Pages.

3. Select the new GitHub repository that you created and, in the Set up builds and deployments section, provide the following information:

Optionally, you can customize the Project name field. It defaults to the GitHub repository’s name, but it does not need to match. The Project name value is assigned as your *.pages.dev subdomain.

4. After completing configuration, select the Save and Deploy.

Review your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified. Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit.

Additionally, you will have access to preview deployments, which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying your changes to production.

​​ Use bindings in your Nuxt application

A binding allows your application to interact with Cloudflare developer products, such as KV, Durable Objects, R2, and D1.

If you intend to use bindings in your project, you must first set up your bindings for local and remote development.

​​ Set up bindings for local development

Projects created via C3 come with nitro-cloudflare-dev, a nitro module that simplifies the process of working with bindings during development:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nitro-cloudflare-dev"],
});

This module is powered by the getPlatformProxy helper function. getPlatformProxy will automatically detect any bindings defined in your project’s wrangler.toml file and emulate those bindings in local development. Review Wrangler configuration information on bindings for more information on how to configure bindings in wrangler.toml.

​​ Set up bindings for a deployed application

In order to access bindings in a deployed application, you will need to configure your bindings in the Cloudflare dashboard.

​​ Add bindings to TypeScript projects

To get proper type support, you need to create a new env.d.ts file in the root of your project and declare a binding.

The following is an example of adding a KVNamespace binding:

env.d.ts
import { CfProperties, Request, ExecutionContext, KVNamespace } from '@cloudflare/workers-types';

declare module 'h3' {
    interface H3EventContext {
        cf: CfProperties,
        cloudflare: {
          request: Request,
          env: {
            MY_KV: KVNamespace,
          }
          context: ExecutionContext,
        };
    }
}

​​ Access bindings in your Nuxt application

In Nuxt, add server-side code via Server Routes and Middleware Open external link . The defineEventHandler() method is used to define your API endpoints in which you can access Cloudflare’s context via the provided context field. The context field allows you to access any bindings set for your application.

The following code block shows an example of accessing a KV namespace in Nuxt.

server/api/hello.js
export default defineEventHandler(({ context }) => {
  const MY_KV = context.cloudflare.env.MY_KV;

  return {
    // ...
  };
});

server/api/hello.ts
export default defineEventHandler(({ context }) => {
  const MY_KV = context.cloudflare.env.MY_KV;

  return {
    // ...
  };
});

​​ Learn more

By completing this guide, you have successfully deployed your Nuxt site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.