Copied to Clipboard
And that's it. Thanks to this module, homepage, category page, and product page will be automatically returning a response header Cache-Control with a certain default value that will enable your browser to cache it properly. Check out the following section to see some configuration options.
Configuration
The package allows you to configure certain properties of it to make it work differently and suit your needs best.
default
This property allows you do override default value of http-cache header which is initially set to max-age=60
['@vue-storefront/http-cache', {
default: 'max-age=120'
}]
matchRoute
Customize http-cache values for selected routes. you can use * for a wildcard. To remove http-cache header use none value.
['@vue-storefront/http-cache', {
matchRoute: {
'/': 'max-age=240',
'/p/*': 'max-age=360',
'/c/*': 'none'
}
}]
Server Cache
To enable Cache on the server side, we can also use the packages provided by Vue Storefront, namely @vue-storefront/cache and @vue-storefront/redis-cache.
First, let's install the required dependencies
yarn add @vue-storefront/cache
yarn add @vue-storefront/redis-cache
Next, let's add required configuration for the packages to work correctly
// nuxt.config.js
export default {
modules: [
['@vue-storefront/cache/nuxt', {
invalidation: {
// Invalidation options
},
driver: [
'@vue-storefront/redis-cache',
{
defaultTimeout: 86400,
redis: {
host: 'localhost',
port: 6379,
password: 'password'
}
}
]
}]
]
};
Check out the following docs to understand better the process of using server cache with Vue Storefront:
Summary
Well done! You have just enabled the Cache on both browser and server environments of your Vue Storefront application. This should improve the performance of you e-commerce website by a mile!