Nuxt Cache-Control

Declare fine-grained cache control headers for your Nuxt application in each page.

• ✨  Release Notes

Features

• 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.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @rezo-zero/nuxt-cache-control

Configure module

// 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
}

Contribution

# 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