{"id":45626,"library":"nuxt-multi-cache","title":"Nuxt Multi Cache","description":"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.","status":"active","version":"4.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/dulnan/nuxt-multi-cache","tags":["javascript","nuxt","cache","ssr","page","caching","component"],"install":[{"cmd":"npm install nuxt-multi-cache","lang":"bash","label":"npm"},{"cmd":"yarn add nuxt-multi-cache","lang":"bash","label":"yarn"},{"cmd":"pnpm add nuxt-multi-cache","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required; the module extends Nuxt's build and runtime behavior.","package":"nuxt","optional":false}],"imports":[{"note":"Nuxt auto-imports composables; explicit import from '#imports' is correct.","wrong":"import { useRouteCache } from 'nuxt-multi-cache'","symbol":"useRouteCache","correct":"import { useRouteCache } from '#imports'"},{"note":"Nuxt auto-imports composables; do not import from the package directly.","wrong":"import { useCDNHeaders } from 'nuxt-multi-cache'","symbol":"useCDNHeaders","correct":"import { useCDNHeaders } from '#imports'"},{"note":"Component is registered globally by the module; import from '#components' or use without explicit import.","wrong":"import { RenderCacheable } from 'nuxt-multi-cache'","symbol":"RenderCacheable","correct":"import { RenderCacheable } from '#components'"}],"quickstart":{"code":"// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-multi-cache'],\n  multiCache: {\n    component: {\n      enabled: true,\n    },\n    route: {\n      enabled: true,\n    },\n    data: {\n      enabled: true,\n    },\n    cdn: {\n      enabled: true,\n    },\n    api: {\n      enabled: true,\n      authorization: process.env.CACHE_API_KEY ?? '',\n    },\n  },\n})\n\n// pages/index.vue\n<script lang=\"ts\" setup>\nuseRouteCache((route) => {\n  route.setCacheable().setMaxAge(3600).addTags(['page:home'])\n})\nuseCDNHeaders((helper) => {\n  helper.public().setNumeric('maxAge', 3600).addTags(['page:home'])\n})\n</script>\n<template>\n  <RenderCacheable cache-key=\"navbar\" :max-age=\"600\">\n    <Navbar />\n  </RenderCacheable>\n</template>","lang":"typescript","description":"Configures all caching layers (component, route, data, CDN) and uses useRouteCache, useCDNHeaders, and RenderCacheable in a page."},"warnings":[{"fix":"Use Nuxt 3; for Nuxt 2 use nuxt-multi-cache@1.x.","message":"Module is for Nuxt 3 only. Version 1.x is for Nuxt 2 (maintenance mode).","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Use a static string or computed constant; for per-request variants, use route caching.","message":"Deprecated: The `cacheKey` prop on RenderCacheable must be unique and static; using dynamic keys can cause stale cache.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Update to v4 syntax: `useRouteCache((route) => route.setCacheable())`.","message":"The `setCacheable()` method signature changed in v4; previously required a callback.","severity":"deprecated","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Ensure cached components do not rely on async setup or suspense.","message":"Component caching only works for components that are rendered synchronously; async components may not be cached correctly.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Update API client URLs to `/api/cache/...`","message":"The API endpoint paths changed in v4: previously under `/cache/api`, now `/api/cache`.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Limit number of tags; consider using a single tag that groups many items.","message":"If CDN cache tags header is set, it may be truncated by the CDN; check limit (e.g., Cloudflare 16KB).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1':88 '2':82 '3':15,77 'activ':69 'api':41 'base':35,103 'branch':90 'cach':3,7,11,20,22,24,27,32,43,48,99,111,114 'cdn':26,106 'compat':79 'compon':19,54,97,115 'component-level':96 'compos':63 'control':28 'data':23,56 'differenti':95 'direct':59 'frequent':72 'generat':108 'granular':52 'header':29,107 'includ':38 'integr':58 'invalid':36,104 'javascript':109 'key':94 'level':53,98 'maintain':70 'mainten':92 'manag':44 'mode':93 'modul':12,67 'multi':2,6 'multipl':51 'nuxt':1,5,14,61,76,81,110 'nuxt-multi-cach':4 'offer':50 'option':40 'page':47,113 'provid':17 'releas':73 'requir':75 'rout':21,55 'serv':85 'simpl':46 'ssr':18,112 'support':31 'tag':34,102 'tag-bas':33,101 'unlik':45 'usecdnhead':65 'useroutecach':64 'v4.0.3':8 'via':100 'x':89","created_at":"2026-06-07T12:55:56.073472+00:00","updated_at":"2026-06-07T12:55:56.073472+00:00","problems":[{"fix":"Ensure useRouteCache is called inside setup() or <script setup> and the callback receives the route helper: useRouteCache((route) => route.setCacheable())","cause":"useRouteCache called outside of component setup or missing route parameter.","error":"Cannot read property 'setCacheable' of undefined"},{"fix":"Add 'nuxt-multi-cache' to modules in nuxt.config.ts and ensure `multiCache.component.enabled: true`.","cause":"Component not auto-imported because nuxt.config misconfiguration or missing module.","error":"Component is not registered: RenderCacheable"},{"fix":"Add a unique static cache-key prop, e.g., <RenderCacheable cache-key=\"navbar\">","cause":"Missing cache-key prop on RenderCacheable component.","error":"CEF: expected non-empty cache key for RenderCacheable"},{"fix":"Enable `multiCache.cdn.enabled: true` in nuxt.config and ensure module is installed.","cause":"Module not loaded or CDN caching disabled.","error":"useCDNHeaders is not defined"},{"fix":"Check the pattern used in route cache definitions; ensure it matches the current path.","cause":"Using regex in route cache key pattern that doesn't match any route.","error":"Cannot read properties of undefined (reading 'match')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/dulnan/nuxt-multi-cache#readme","github":"https://github.com/dulnan/nuxt-multi-cache","docs":null,"changelog":null,"pypi":null,"npm":"nuxt-multi-cache","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}