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
]
This guy is awesome, check that out 👉🏼
Thank you 👨🍳
Top comments (2)
Thanks for that one! 🙏🏻
I'll add this link to anybody interested by a solution for Nuxt3.
Most welcome 💕