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.tsexportdefaultdefineNuxtConfig({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 withuseCacheControl 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:
exportinterfaceCacheControlOptions{maxAge?:number// in secondssMaxAge?:number// in secondsstaleWhileRevalidate?:number|true// in seconds, or true, which means infinite staleWhileRevalidatepublic:boolean}Local development
# Install dependenciespnpm install# Generate type stubspnpm dev:prepare# Develop with the playgroundpnpm dev# Build the playgroundpnpm dev:build# Run ESLintpnpm lint# Run Vitestpnpmtestpnpm test:watch# Release new versionpnpm release
