Deploy Nuxt on the Edge

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.

DeploymentsDeployment Details

Production vs Preview Deployments

NuxtHub supports two types of deployments: production and preview.

Production Deployments

• When setting up your project, you can specify a production branch (defaults to main)
• Successful deployments to the production branch will be:
  • Accessible via your primary domain
  • Also available at <commit>.<project>.pages.dev

Preview Deployments

• Any deployment from a non-production branch (including pull requests) is considered a preview
• Successful preview deployments are accessible via:
  • <commit>.<project>.pages.dev
  • <branch>.<project>.pages.dev

NuxtHub CLI

Deploy your local project with a single command:

npx nuxthub deploy

The command will:

1. Ensure you are logged in on admin.hub.nuxt.com
2. Make sure you linked your Cloudflare account
3. Link your local project with a NuxtHub project or help you create a new one
4. Build your Nuxt project with the correct preset
5. Deploy it to your Cloudflare account with all the necessary resources (D1, KV, R2, etc.)
6. Provide you with a URL to access your project with a free <my-app>.nuxt.dev domain

GitHub Action

To deploy your project with a GitHub Action, you can use the following workflow:

name: Deploy with NuxtHub CLI
on: push
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false
      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      - name: Install dependencies
        run: pnpm install

      - name:  Deploy with nuxthub
        run: npx nuxthub deploy
        env:
          NUXT_HUB_PROJECT_KEY: ${{ secrets.NUXT_HUB_PROJECT_KEY}}
          NUXT_HUB_USER_TOKEN: ${{ secrets.NUXT_HUB_USER_TOKEN }}

You need to add the following secrets to your GitHub repository:

• NUXT_HUB_PROJECT_KEY: Your project key (available in your project settings in the NuxtHub Admin or in your .env file if you ran npx nuxthub link)
• NUXT_HUB_USER_TOKEN: Your user token available in User settings → Tokens in the NuxtHub Admin

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

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 (D1, KV, R2, etc.).

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 tab and set:

• Runtime > Compatibility flags
  • Add the nodejs_compat flag
• Bindings
  • KV namespace: KV and select your KV namespace created
  • KV namespace: CACHE and select your KV namespace for caching created
  • R2 bucket: BLOB and select your R2 bucket created
  • D1 database: DB and select your D1 database created
  • AI: AI
  • Browser: BROWSER
  • Vectorize: VECTORIZE_<index name in upper case> and select your Vectorize index created
    

    # Create the Vectorize index manually using
    npx wrangler vectorize create <index-name> --dimensions=<dimensions> --metric=<metric>
    

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