Registry / devops / nuxt-multi-cache

nuxt-multi-cache

library4.0.3jsnpmunverified

nuxt-multi-cache (v4.0.3) is a caching module for Nuxt 3 that provides SSR component caching, route caching, data caching, and CDN cache control headers. It supports cache tag-based invalidation and includes an optional API for cache management. Unlike simple page caching, it offers multiple granularity levels (component, route, data) and integrates directly with Nuxt's composables (useRouteCache, useCDNHeaders). The module is actively maintained with frequent releases and requires Nuxt 3 (not compatible with Nuxt 2, which is served by the 1.x branch in maintenance mode). Key differentiators: component-level caching via <RenderCacheable>, tag-based invalidation, and CDN header generation.

devops

npm install nuxt-multi-cache

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NUXT-MULTI-CACHE

nuxt-multi-cache

devopsjavascriptv4.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useRouteCache

✓ import { useRouteCache } from '#imports'

✗ import { useRouteCache } from 'nuxt-multi-cache'

Nuxt auto-imports composables; explicit import from '#imports' is correct.

useCDNHeaders

✓ import { useCDNHeaders } from '#imports'

✗ import { useCDNHeaders } from 'nuxt-multi-cache'

Nuxt auto-imports composables; do not import from the package directly.

RenderCacheable

✓ import { RenderCacheable } from '#components'

✗ import { RenderCacheable } from 'nuxt-multi-cache'

Component is registered globally by the module; import from '#components' or use without explicit import.

Configures all caching layers (component, route, data, CDN) and uses useRouteCache, useCDNHeaders, and RenderCacheable in a page.

// nuxt.config.ts export default defineNuxtConfig({ modules: ['nuxt-multi-cache'], multiCache: { component: { enabled: true, }, route: { enabled: true, }, data: { enabled: true, }, cdn: { enabled: true, }, api: { enabled: true, authorization: process.env.CACHE_API_KEY ?? '', }, }, }) // pages/index.vue <script lang="ts" setup> useRouteCache((route) => { route.setCacheable().setMaxAge(3600).addTags(['page:home']) }) useCDNHeaders((helper) => { helper.public().setNumeric('maxAge', 3600).addTags(['page:home']) }) </script> <template> <RenderCacheable cache-key="navbar" :max-age="600"> <Navbar /> </RenderCacheable> </template>

Debug

Known issues

breakingModule is for Nuxt 3 only. Version 1.x is for Nuxt 2 (maintenance mode).

fix

Use Nuxt 3; for Nuxt 2 use nuxt-multi-cache@1.x.

affects: >=4.0.0 <5.0.0

breakingDeprecated: The `cacheKey` prop on RenderCacheable must be unique and static; using dynamic keys can cause stale cache.

fix

Use a static string or computed constant; for per-request variants, use route caching.

affects: >=3.0.0 <4.0.0

deprecatedThe `setCacheable()` method signature changed in v4; previously required a callback.

fix

Update to v4 syntax: `useRouteCache((route) => route.setCacheable())`.

affects: >=3.0.0 <4.0.0

gotchaComponent caching only works for components that are rendered synchronously; async components may not be cached correctly.

fix

Ensure cached components do not rely on async setup or suspense.

affects: >=2.0.0

breakingThe API endpoint paths changed in v4: previously under `/cache/api`, now `/api/cache`.

fix

Update API client URLs to `/api/cache/...`

affects: >=3.0.0 <4.0.0

gotchaIf CDN cache tags header is set, it may be truncated by the CDN; check limit (e.g., Cloudflare 16KB).

fix

Limit number of tags; consider using a single tag that groups many items.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read property 'setCacheable' of undefined

useRouteCache called outside of component setup or missing route parameter.

fix

Ensure useRouteCache is called inside setup() or <script setup> and the callback receives the route helper: useRouteCache((route) => route.setCacheable())

Component is not registered: RenderCacheable

Component not auto-imported because nuxt.config misconfiguration or missing module.

fix

Add 'nuxt-multi-cache' to modules in nuxt.config.ts and ensure `multiCache.component.enabled: true`.

CEF: expected non-empty cache key for RenderCacheable

Missing cache-key prop on RenderCacheable component.

fix

Add a unique static cache-key prop, e.g., <RenderCacheable cache-key="navbar">

useCDNHeaders is not defined

Module not loaded or CDN caching disabled.

fix

Enable `multiCache.cdn.enabled: true` in nuxt.config and ensure module is installed.

Cannot read properties of undefined (reading 'match')

Using regex in route cache key pattern that doesn't match any route.

fix

Check the pattern used in route cache definitions; ensure it matches the current path.

Upgrade

Version history

4.0.3latest on npm

Audit

Dependencies

nuxtrequiredPeer dependency required; the module extends Nuxt's build and runtime behavior.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/dulnan/nuxt-multi-cache ↗

packagenuxt-multi-cache ↗

homepagehttps://github.com/dulnan/nuxt-multi-cache#readme ↗