Step 1 - Install the dependency
yarn add @nuxtjs/sitemap
Step 2 - Sitemap Configuration
Make sure to define the new sitemap config and do note the important part is the routes property. This route property can accept array and function and for this example, we are getting the routes from the backend server of our API. By default, the links to our application are generated by the module but it only works for non-dynamic links. For dynamic links, we will have to configure the routes property of the sitemap like below.
import axios from 'axios' export default { sitemap: { gzip: true, routes: async () => { const { data } = await axios.get('https://your-website.test/get-sitemap-data') return data } } }
[ 'post/1', 'post/2', 'post/3', ]
posts/_id.vue categories/_id.vue
Step 3 - Generate sitemap
By now when you run "yarn generate && yarn start" you will be able to access the sitemap file through "localhost:3000/sitemap.xml" and the generated file will contain links as follows. For demonstration imagine postsrc.com as the URL.
postsrc.com (generated by sitemap module) postsrc.com/posts (generated by sitemap module) postsrc.com/posts/1 (generated by the backend api) postsrc.com/posts/2 (generated by the backend api) postsrc.com/posts/3 (generated by the backend api)