Setup · NuxtHub

NuxtHub Key Value Storage automatically configures Nitro Storage, which is built on unstorage.

Getting Started

Enable the key-value storage in your NuxtHub project by adding the kv property to the hub object in your nuxt.config.ts file.

nuxt.config.ts

export default defineNuxtConfig({
  hub: {
    kv: true
  }
})

Automatic Configuration

When building the Nuxt app, NuxtHub automatically configures the key-value storage driver on many providers.

Install the @upstash/redis package

pnpm add @upstash/redis

yarn add @upstash/redis

npm install @upstash/redis

bun add @upstash/redis

deno add npm:@upstash/redis

npx nypm add @upstash/redis

Set the UPSTASH_REDIS_REST_URL environment variable to your Upstash Redis REST URL.

.env

UPSTASH_REDIS_REST_URL=https://...
UPSTASH_REDIS_REST_TOKEN=...

When deploying to Vercel, we automatically detect if KV_REST_API_URL and KV_REST_API_TOKEN environment variables are set, and use them to configure the Upstash Redis connection.

Install the ioredis package

pnpm add ioredis

yarn add ioredis

npm install ioredis

bun add ioredis

deno add npm:ioredis

npx nypm add ioredis

Set the REDIS_URL environment variable to your Redis connection URL.

.env

REDIS_URL=redis://localhost:6379

When deploying to Vercel, we automatically detect if REDIS_URL or KV_URL environment variable are set, and use one of them to configure the Redis connection.

When deploying to Cloudflare, configure Cloudflare Workers KV by providing the namespace ID. NuxtHub auto-generates the wrangler bindings at build time.

nuxt.config.ts

export default defineNuxtConfig({
  hub: {
    kv: {
      driver: 'cloudflare-kv-binding',
      namespaceId: '<kv-namespace-id>'
    }
  }
})

Learn more about KV bindings on Cloudflare's documentation.

When deploying to other providers, Nitro Storage kv is configured to use the filesystem.

You can manually configure the kv mount to use a different storage driver.

Or directly set the REDIS_URL environment variable.

.env

REDIS_URL=redis://localhost:6379

If no automatic configuration is found, it will default to filesystem and store the data in the .data/kv.

Manual Configuration

You can use any unstorage driver by configuring the hub.kv option with a driver and its options.

You can find the driver list on unstorage documentation with their configuration.

nuxt.config.ts

export default defineNuxtConfig({
  hub: {
    kv: {
      driver: 'redis',
      url: 'redis://localhost:6379',
      /* any additional driver options */
    }
  }
})

You can find the driver list on unstorage documentation with their configuration.