You are reading the documentation for Vue Storefront v2. See the latest docs.

Nuxt Cache Control Module

Vue Storefront has an http-cache module that allows you to set the Cache-Control header for selected routes. This is useful when you want to allow browsers or CDNs to cache your pages.

The Cache-Control HTTP header is used to control caching behavior in browsers and CDNs. It is a good practice to set this header on your pages to allow browsers to cache them. This can improve the performance of your site by reducing the number of requests to your server.


yarn add @vue-storefront/http-cache

Once installed, you can add @vue-storefront/http-cache/nuxt to the modules in your nuxt.config.js:

  modules: [
    ['@vue-storefront/http-cache/nuxt', { configuration } ]

Configuration Options


This property allows you do override default value of Cache-Control header which is initially set to max-age=60. This header will be added on all of your routes.

['@vue-storefront/http-cache/nuxt', {
  default: 'max-age=120'


You can also specify a matchRoute object if you need to customize the caching behavior on a per-route basis. Wildcard routes can be specified with a *. To remove the Cache-Control header, you can pass a value of none.

['@vue-storefront/http-cache/nuxt', {
  matchRoute: {
    '/': 'max-age=240',
    '/p/*': 'max-age=360',
    '/c/*': 'none'