NuxtHub Key Value Storage automatically configures Nitro Storage, which is built on unstorage.
Enable the key-value storage in your NuxtHub project by adding the kv property to the hub object in your nuxt.config.ts file.
export default defineNuxtConfig({
hub: {
kv: true
}
})
When building the Nuxt app, NuxtHub automatically configures the key-value storage driver on many providers.
@upstash/redis packagepnpm 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
UPSTASH_REDIS_REST_URL environment variable to your Upstash Redis REST URL.UPSTASH_REDIS_REST_URL=https://...
UPSTASH_REDIS_REST_TOKEN=...
KV_REST_API_URL and KV_REST_API_TOKEN environment variables are set, and use them to configure the Upstash Redis connection.ioredis packagepnpm add ioredis
yarn add ioredis
npm install ioredis
bun add ioredis
deno add npm:ioredis
npx nypm add ioredis
REDIS_URL environment variable to your Redis connection URL.REDIS_URL=redis://localhost:6379
REDIS_URL or KV_URL environment variable are set, and use one of them to configure the Redis connection.When deploying to Cloudflare, it automatically configures Cloudflare Workers KV.
Add a KV binding to a Cloudflare Workers KV namespace in your wrangler.jsonc config.
{
"$schema": "node_modules/wrangler/config-schema.json",
// ...
"kv_namespaces": [
{
"binding": "KV",
"id": "<id>"
}
]
}
Learn more about adding bindings on Cloudflare's documentation.
When deploying to other providers, Nitro Storage kv is configured to use the filesystem.
Or directly set the REDIS_URL environment variable.
REDIS_URL=redis://localhost:6379
.data/kv.You can use any unstorage driver by configuring the hub.kv option with a driver and its options.
export default defineNuxtConfig({
hub: {
kv: {
driver: 'redis',
url: 'redis://localhost:6379',
/* any additional driver options */
}
}
})
The hub:kv module provides access to the Key-Value storage through an unstorage instance.
import { kv } from 'hub:kv'
kv is auto-imported on server-side, you can directly use it without importing it from hub:kv.Puts an item in the storage.
import { kv } from 'hub:kv'
await kv.set('vue', { year: 2014 })
// using prefixes to organize your KV namespace, useful for the `keys` operation
await kv.set('vue:nuxt', { year: 2016 })
By default, items in your KV namespace will never expire. You can delete them manually using the del() method or set a TTL (time to live) in seconds.
The item will be deleted after the TTL has expired. The ttl option maps to Cloudflare's expirationTtl option. Values that have recently been read will continue to return the cached value for up to 60 seconds and may not be immediately deleted for all regions.
import { kv } from 'hub:kv'
await kv.set('vue:nuxt', { year: 2016 }, { ttl: 60 })
Retrieves an item from the Key-Value storage.
import { kv } from 'hub:kv'
const vue = await kv.get('vue')
/*
{
year: 2014
}
*/
Checks if an item exists in the storage.
import { kv } from 'hub:kv'
const hasAngular = await kv.has('angular') // false
const hasVue = await kv.has('vue') // true
Delete an item with the given key from the storage.
import { kv } from 'hub:kv'
await kv.del('react')
Deletes all items from the KV namespace..
import { kv } from 'hub:kv'
await kv.clear()
To delete all items for a specific prefix, you can pass the prefix as an argument. We recommend using prefixes for better organization in your KV namespace.
import { kv } from 'hub:kv'
await kv.clear('react')
Retrieves all keys from the KV storage.
import { kv } from 'hub:kv'
const keys = await kv.keys()
/*
[
'react',
'react:gatsby',
'react:next',
'vue',
'vue:nuxt',
'vue:quasar'
]
To get the keys starting with a specific prefix, you can pass the prefix as an argument. We recommend using prefixes for better organization in your KV namespace.
import { kv } from 'hub:kv'
const vueKeys = await kv.keys('vue')
/*
[
'vue:nuxt',
'vue:quasar'
]
*/