Automatically generate or serve dynamic sitemap.xml for Nuxt.js projects!
Module based on the awesome sitemap package ❤️
-
Add
@nuxtjs/sitemapdependency using yarn or npm to your project -
Add
@nuxtjs/sitemapmodule tonuxt.config.js
modules: [
'@nuxtjs/sitemap'
]notice: If you use other modules (eg.
nuxt-i18n), always declare the sitemap module at end of array (eg.modules: ['nuxt-i18n', '@nuxtjs/sitemap'])
- Add additional options to
sitemapsection ofnuxt.config.jsto override defaults
sitemap: {
path: '/sitemap.xml',
hostname: 'https://example.com',
cacheTime: 1000 * 60 * 15,
gzip: true,
exclude: [
'/secret',
'/admin/**'
],
routes: [
'/page/1',
{
url: '/page/2',
changefreq: 'daily',
priority: 1,
lastmodISO: '2017-06-30T13:30:00.000Z'
}
]
}The exclude parameter is an array of glob patterns to exclude static routes from the generated sitemap.
The routes parameter follows the same way than the generate configuration.
See as well the routes examples below.
- Default:
/sitemap.xml
Where serve/generate sitemap file
- Default:
hostname()for generate mode- Dynamically based on request url for middleware mode
This values is mandatory for generation sitemap file, and you should explicitly provide it for generate mode.
- Default:
1000 * 60 * 15(15 Minutes)
Defines how frequently should sitemap routes being updated.
Please note that after each invalidation, routes will be evaluated again. (See routes section)
- Default:
undefined
If filter option is set as a function, all routes will be filtered through it.
Examples:
nuxt.config.js
// filter routes by language
module.exports = {
sitemap: {
filter ({ routes, options }) {
if (options.hostname === 'example.com') {
return routes.filter(route => route.locale === 'en')
}
return routes.filter(route => route.locale === 'fr')
}
}
}// add a trailing slash to each route
module.exports = {
sitemap: {
filter ({ routes }) {
return routes.map(route => route.url = `${route.url}/`)
}
}
}- Default:
false
Enable the creation of the .xml.gz sitemap compressed with gzip.
Dynamic routes are ignored by the sitemap module.
Example:
-| pages/
---| index.vue
---| users/
-----| _id.vue
If you want the module to add routes with dynamic params, you need to set an array of dynamic routes.
We add routes for /users/:id in nuxt.config.js:
sitemap: {
routes: [
'/users/1',
'/users/2',
'/users/3'
]
}nuxt.config.js
const axios = require('axios')
module.exports = {
sitemap: {
routes () {
return axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => res.data.map(user => '/users/' + user.username))
}
}
}This feature is deprecated. Use a promise-based approach instead.
nuxt.config.js
const axios = require('axios')
module.exports = {
sitemap: {
routes (callback) {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
let routes = res.data.map(user => '/users/' + user.username)
callback(null, routes)
})
.catch(callback)
}
}
}