DEV Community

sium_hossain
sium_hossain

Posted on • Edited on

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
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 👨‍🍳

Top comments (2)

Collapse
 
kissu profile image
Konstantin BIFERT

Thanks for that one! 🙏🏻
I'll add this link to anybody interested by a solution for Nuxt3.

Collapse
 
siumhossain profile image
sium_hossain • Edited

Most welcome 💕