beta

Remote Storage

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

One of the main features of NuxtHub is the ability to access your remote storage from your local environment or from external 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, useful for sharing your database, KV, and blob data with your team or work with your production data.
  • External Nuxt projects: Access your remote storage from another Nuxt project, useful if your frontend is deployed on a different hosting platform and you want to use your NuxtHub project as a backend.
Your project must be deployed in order to use this feature.

Local Development

Set Project Secret Key

To setup your deployed project to accept remote storage from your local project, you first need to set the NUXT_HUB_PROJECT_SECRET_KEY environment variable in your deployed project settings.

You can generate a random secret using this tool.

Make sure to redeploy your project to apply the changes.

Next, you need to set the NUXT_HUB_PROJECT_SECRET_KEY in your local .env file.

.env
NUXT_HUB_PROJECT_SECRET_KEY=<my-project-secret-key>

Set the Project URL

Use the hub.projectUrl option to set the URL of your deployed project based on the local environment:

nuxt.config.ts
export default defineNuxtConfig({
  // Apply only in development
  $development: {
    hub: {
      projectUrl ({ env, branch }) {
        // Select the preview URL from the dev branch
        if (env === 'preview') {
          return 'https://dev.my-project.nuxt.dev'
        }
        return 'https://my-project.nuxt.dev'
      }
    }
  }
})
env is production when branch is main, otherwise it's preview.

Start your Nuxt project

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:

Terminal
ℹ Using production environment
ℹ Using remote storage from https://my-project.nuxt.dev
ℹ Remote storage available: database, kv, blob
That's it! Your local project is now using the remote storage from your deployed project.

To always use the remote storage in your local project in development, you can use the remote option in your nuxt.config file:

nuxt.config.ts
export default defineNuxtConfig({
  // Apply only in development
  $development: {
    hub: {
      remote: true // or 'production' or 'preview'
    }
  }
})
You should not use the remote option in your nuxt.config file in production if you are deploying your project using NuxtHub Admin, Cloudflare Pages or Cloudflare Workers. Use it in production only when you are connecting from external Nuxt projects.

External 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.

See an example in video.

To access your remote storage from another Nuxt project:

  1. Install @nuxthub/core to your project:
pnpm add @nuxthub/core
  1. Add it to the modules section in your nuxt.config and set the remote option to true:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxthub/core'],
  hub: {
    remote: true
  }
})
  1. Add the NUXT_HUB_PROJECT_URL and NUXT_HUB_PROJECT_SECRET_KEY environment variables to your project:
.env
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.

You can now use the remote storage from your NuxtHub project in your external Nuxt project (both locally and in production).

Deploy

Learn how to host your full-stack Nuxt application globally with minimal configuration.

Server Logs

Access real-time logs of your deployed Nuxt application.