Posted on Jun 22, 2022 • Edited on Jun 28, 2022

Generating Sitemap XML for Static and Dynamic (from multiple API endpoint) in Nuxt js

In this article I will talk about how can we build static and dynamic sitemap url from single or multiple endpoint from API

First of all we have to install @nuxtjs/sitemap package by -

npm i @nuxtjs/sitemap

@nuxtjs/sitemap
Then in nuxt.config.js we have to add this module by -

modules: [ //other modules.... '@nuxtjs/sitemap' ],

Here is the full code -

const axios = require('axios') export default{ ....... sitemap: [ { path: '/public/product/sitemap_index.xml', exclude: [ '/admin/**', '/admin', '/checkout', '/previous-order' ], routes: async () => { let { data } = await axios.get('https://www.openmediabd.com/api/product/') let product = data.results let watchPages = product.map((product) => { return{ url:`/${product.product_slug}`, changefreq:'daily', priority:0.8, lastmod: product.updated } }) let { data:data2 } = await axios.get('https://www.openmediabd.com/api/category/') let category = data2.data let watchPages2 = category.map((category) => { return{ url:`category/${category.title}`, changefreq:'daily', priority:0.9, lastmod: category.updated } }) return [{ url:'/', changefreq:'daily', priority:1, }, { url:'/login', changefreq:'weekly', priority:0.6, }, { url:'/register', changefreq:'weekly', priority:0.6, }, ...watchPages, ...watchPages2 ] }, }, ], }

Explanation

Here is the path where our xml file will generate.

path: '/public/product/sitemap_index.xml',

those path will not include in our xml file.

 exclude: [ '/admin/**', '/admin', '/checkout', '/previous-order' ],

And in my xml I want to generate url from 2 different async route. But you can also generate two different xml file for two routes.

routes: async () => { let { data } = await axios.get('https://www.openmediabd.com/api/product/') let product = data.results let watchPages = product.map((product) => { return{ url:`/${product.product_slug}`, changefreq:'daily', priority:0.8, lastmod: product.updated } }) let { data:data2 } = await axios.get('https://www.openmediabd.com/api/category/') let category = data2.data let watchPages2 = category.map((category) => { return{ url:`category/${category.title}`, changefreq:'daily', priority:0.9, lastmod: category.updated } })

And for static url we can do that by -

 return [{ url:'/', changefreq:'daily', priority:1, }, { url:'/login', changefreq:'weekly', priority:0.6, }, { url:'/register', changefreq:'weekly', priority:0.6, }, ...watchPages, //dynamic routes along with static route ...watchPages2 ]