Getting Started

Deploy

How to deploy your full-stack Nuxt project to your Cloudflare account.

To deploy your Nuxt application on the Edge, we use Cloudflare Pages. Therefore, we require you to create a Cloudflare account.
You can deploy NuxtHub projects with a free Cloudflare account.

NuxtHub Admin (alpha)

The NuxtHub Admin is made to simplify your experience with NuxtHub, enabling you to effortlessly manage teams and projects, as well as deploying NuxtHub application with zero-configuration on your Cloudflare account.

Quickstart

  1. Login to https://admin.hub.nuxt.com
  2. Connect your Cloudflare account by clicking on Create a new token with required permissions and follow the instructions
  3. You are now ready to deploy your Nuxt project to your Cloudflare account!

NuxtHub CLI

You can deploy your local project with a single command:

Terminal
npx nuxthub deploy

The command will:

  1. Ensure you are logged in on admin.hub.nuxt.com
  2. Link your local project with a NuxtHub project or help you create a new one
  3. Build your Nuxt project with the correct preset
  4. Deploy it to your Cloudflare account with all the necessary resources
  5. Provide you with a URL to access your project
You can also install the NuxtHub CLI globally with: npm i -g nuxthub.

Cloudflare Pages CI

It is possible to use Cloudflare Pages CI to deploy your project by connecting your GitHub or GitLab account. Once your repository is connected, each commit will trigger a new deployment.

  1. Open the NuxtHub Admin
  2. Click on New Project then Import a GitHub repository
  3. Select your Github repository
  4. Click on Import repository
That's it! NuxtHub will automatically configure the necessary resources and environment variables for you start a deployment on Cloudflare.

Self-hosted

You can deploy your project on your own Cloudflare account without using the NuxtHub Admin.

For that, you need to create the necessary resources in your Cloudflare account and configure your project to use them:

You only need to create these resources if you have explicitly enabled them in the Hub Config.

Then, create a Cloudflare Pages project and link your GitHub or Gitlab repository and choose the Nuxt Framework preset in the build settings.

Once your project is created, open the Settings -> Functions tab and set:

  • Placement: Smart
  • KV namespace bindings
    • Set the variable name as KV and select your KV namespace created
    • Set the variable name as CACHE and select your KV namespace for caching created
  • R2 bucket bindings
    • Set the variable name as BLOB and select your R2 bucket created
  • D1 database bindings
    • Set the variable name as DB and select your D1 database created

Go back to the Deployment tab and retry the last deployment by clicking on ... then Retry deployment.

Once the deployment is done, you should be able to use npx nuxt dev --remote after configuring the remote storage

Installation

Learn how to create a NuxtHub project or add it to your current Nuxt project.

Remote Storage

Access your remote storage locally or from external Nuxt projects with our secured proxy.