Appearance
Server Options
All dynamic configuration is located in a special runtime file located at ~/server/multiCache.serverOptions.ts
. This file is bundled together with the nitro build in the .output folder.
Create a file called multiCache.serverOptions.ts
(or js/mjs) inside the server
folder in your Nuxt root.
INFO
In previous versions the file was located in ~/app/multiCache.serverOptions.ts
. For future compatibility with Nuxt 4 the path has been changed to the server dir, which defaults to <root>/server
. The legacy file location is still supported but will be removed in the next major release.
typescript
import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
export default defineMultiCacheOptions({
// ...
})
Cache Configuration
For each cache you can define custom options for the unstorage instance, for example a custom cache driver.
typescript
import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
import redisDriver from 'unstorage/drivers/redis'
export default defineMultiCacheOptions({
data: {
storage: {
driver: redisDriver({
base: 'data:',
}),
},
},
component: {
storage: {
driver: redisDriver({
base: 'component:',
}),
},
},
})
Custom cache key generation for route cache
Custom API Authorization
This method will be called for each request to the API. The function receives the H3Event
object as an argument and can then decide if authorization is granted by returning a Promise that resolves to true
or false
.
typescript
import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
import { isAuthenticated } from './somewhere'
export default defineMultiCacheOptions({
api: {
// Use a custom method that checks authorization. Can be something like
// cookie, basic auth or request IP.
authorization: async function (event) {
return await isAuthenticated(event)
},
},
})
Disable all Caches per Request
typescript
import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
export default defineMultiCacheOptions({
// Custom callback that decides if caching should be enabled for the current
// request. Returning false here prevents access to the cache for the
// duration of the request.
enabledForRequest: async function (event) {
const user = await getUserFromRequest(event)
// Disabled all caching for logged in users.
if (user.isLoggedIn) {
return false
}
// Caches enabled for anonymous users.
return true
},
})
Use a global cache prefix
You can automatically prefix every cache item with a string. This will affect all caches and is prepended to every cache key.
Static
Pass a static string which is included in the build. A common use case is if you use your Nuxt app to serve multiple domains but use the same cache backend (e.g. redis).
typescript
import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
export default defineMultiCacheOptions({
cacheKeyPrefix: 'example_com',
})
Dynamic
Provide a method that determines the cache key prefix per request. One use case is if your app responds differently based on the request headers, e.g. Accept-Language
.
typescript
import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
import { H3Event, getHeader } from 'h3'
function getCacheKeyPrefix(event: H3Event): string {
const acceptLanguage = getHeader(event, 'accept-language') || ''
if (acceptLanguage.includes('de')) {
return 'de'
}
return 'en'
}
export default defineMultiCacheOptions({
cacheKeyPrefix: (event) => {
return Promise.resolve(getCacheKeyPrefix(event))
},
})