Generating Sitemap XML for Static and Dynamic (from multiple API endpoint) in Nuxt js
Tags: javascript, nuxt, xml, webdev
Published: 2022-06-22 06:05:02

_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 -
```bash 
npm i @nuxtjs/sitemap
```

[@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap)
Then in `nuxt.config.js` we have to add this module by - 
```js
modules: [
    //other modules....
    '@nuxtjs/sitemap'
  ],
```
Here is the full code -
```js
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.
```js
path: '/public/product/sitemap_index.xml',
```
those path will not include in our xml file.
```js

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.
 ```js
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 -

```js
 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 👉🏼]
(https://www.vuescreencasts.com/watch/313)

**Thank you 👨‍🍳**