Declare fine-grained cache control headers for your Nuxt application in each page.
- Fine-grained cache control: Set cache control headers for each page with
useCacheControl
composable. - Prevents caching when response status is not 200
- Prevents public responses when some cookies attached: configure some cookies names for which cache-control will be private.
Install the module to your Nuxt application with one command:
npx nuxi module add @rezo-zero/nuxt-cache-control
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@rezo-zero/nuxt-cache-control'
],
cacheControl: {
noCacheCookies: ['cart', 'session', 'auth']
}
})
That's it! You can now use Nuxt Cache Control in your Nuxt app with useCacheControl
composable.
<script setup>
/*
* Define SSR cache control header for this page
*/
useCacheControl({
public: true,
// 1 hour
maxAge: 60 * 60,
// 30 minutes
sMaxAge: 60 * 30,
// SWR for 2 minutes
staleWhileRevalidate: 60 * 2,
})
</script>
Cache control composable accepts the following options:
export interface CacheControlOptions {
maxAge?: number // in seconds
sMaxAge?: number // in seconds
staleWhileRevalidate?: number | true // in seconds, or true, which means infinite staleWhileRevalidate
public: boolean
}
Local development
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Build the playground
pnpm dev:build
# Run ESLint
pnpm lint
# Run Vitest
pnpm test
pnpm test:watch
# Release new version
pnpm release