Setup · NuxtHub

NuxtHub Cache automatically configures Nitro's cache storage. It allows you to cache API routes, server functions, and pages in your application.

Getting Started

Enable cache storage in your project by setting cache: true in the NuxtHub config.

nuxt.config.ts

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

Automatic Configuration

NuxtHub automatically configures the cache storage driver based on your hosting provider.

When deploying to Vercel, it automatically configures Vercel Runtime Cache.

No configuration is necessary to enable the Vercel Runtime Cache.

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

nuxt.config.ts

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

Learn more about KV bindings on Cloudflare's documentation.

When deploying to other providers, it automatically configures the filesystem.

You can configure the cache to use a different storage driver.

Custom Driver

You can use any unstorage driver by providing a configuration object to cache.

nuxt.config.ts

export default defineNuxtConfig({
  hub: {
    cache: {
      driver: 'redis',
      url: 'redis://localhost:6379'
    }
  }
})

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