Home/ Questions/Q 1114

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 62k
Asked: 2024-11-25T05:09:07+00:00

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

  • 62k

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
Enter fullscreen mode Exit fullscreen mode

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

modules: [     //other modules....     '@nuxtjs/sitemap'   ],
Enter fullscreen mode Exit fullscreen mode

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         ]       },     },    ], }
Enter fullscreen mode Exit fullscreen mode

Explanation

Here is the path where our xml file will generate. 

path: '/public/product/sitemap_index.xml',
Enter fullscreen mode Exit fullscreen mode

those path will not include in our xml file. 

 exclude: [         '/admin/**',         '/admin',         '/checkout',         '/previous-order'       ],
Enter fullscreen mode Exit fullscreen mode

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            }         })
Enter fullscreen mode Exit fullscreen mode

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         ]
Enter fullscreen mode Exit fullscreen mode

This guy is awesome, check that out 👉🏼

Thank you 👨‍🍳

javascriptnuxtwebdevxml
Share

Leave an answer

You must login to add an answer.

Need An Account,