Remote Storage

One of the main features of NuxtHub is the ability to access your remote storage from your local environment or from other Nuxt projects. This is made possible by our secured proxy system.

There are two ways to use the remote storage:

• Local development: Access your remote storage from your local environment.
• Other Nuxt projects: Access your remote storage from other Nuxt projects, useful if your frontend is deployed on another hosting platform.

Local Development

Once your project is deployed, you can use the remote storage in your local project.

Start your Nuxt project with:

npx nuxt dev --remote

The development project will now use the remote storage from your deployed project and these logs should happen in your terminal:

ℹ Using remote features from https://my-project.nuxt.dev
ℹ Remote storage available: database, kv, blob

To always use the remote storage in your local project, you can add NUXT_HUB_REMOTE=true in your .env file:

NUXT_HUB_REMOTE=true

Self-hosted

If you are not using the NuxtHub Console to manage your project, you can still use the remote storage in your local development environment.

1. Set the NUXT_HUB_PROJECT_SECRET_KEY environment variable in your Cloudflare Pages project settings and retry the last deployment to apply the changes (you can generate a random secret on https://www.uuidgenerator.net/version4)
2. Set the same NUXT_HUB_PROJECT_SECRET_KEY and NUXT_HUB_PROJECT_URL environment variables in your local project
   .env

   NUXT_HUB_PROJECT_SECRET_KEY=my-project-secret-used-in-cloudflare-env
   NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
   

Then, start your Nuxt project with:

npx nuxt dev --remote

Other Nuxt Projects

It is possible to use the remote storage from another Nuxt project. This can be useful if your frontend is deployed on another hosting platform and you want to use your NuxtHub as your backend.

To access your remote storage from another Nuxt project:

1. Install @nuxthub/core to your project:

pnpm add @nuxthub/core

2. Add it to the extends section in your nuxt.config and set the remote option to true:

export default defineNuxtConfig({
  extends: ['@nuxthub/core'],
  hub: {
    remote: true
  }
})

3. Add the NUXT_HUB_PROJECT_URL and NUXT_HUB_PROJECT_SECRET_KEY environment variables to your project:

NUXT_HUB_PROJECT_URL=https://my-nuxthub-project.pages.dev
NUXT_HUB_PROJECT_SECRET_KEY=my-project-secret-used-in-cloudflare-env

If you haven't, set the NUXT_HUB_PROJECT_SECRET_KEY environment variable in your NuxtHub deployed project and make sure to redeploy.