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

#javascript #nuxt #xml #webdev

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
        ]