Automatically generate or serve dynamic sitemap.xml for Nuxt.js projects!

Hi In this Article I will show how to configure dynamic Sitemap in NuxtJS

Hope you have already the NuxtJs Project here I am only showing the Sitemap configuration. Lets Start

npm install @nuxtjs/sitemap
 
or

yarn add @nuxtjs/sitemap

Once successfully installed you can check your package.json file under dependencies @nuxtjs/sitemap installed
Then go to the nuxt.config.js file and add the modules.

modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
//'vue-social-sharing/nuxt',
'@nuxtjs/sitemap'
],

Then Import Axios into the nuxt.config.js file on the top

const axios = require('axios')

Then you have to create a sitemap.xml file in a root folder

To declare a sitemap index and its linked sitemaps, use the sitemaps property.

sitemap: {
  hostname: 'your website url',
   gzip: true,
   exclude: [

   ],
   routes: async () => {
     let { data } = await axios.get('https://yourapi/articles')
     return data.map(v => `/blog/${v.slug}`)
   }
 },

http://localhost:3000/sitemap.xml

<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:news="http://www.google.com/schemas/sitemap-
news/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:mobile="http://www.google.com/schemas/sitemap-
mobile/1.0"
xmlns:image="http://www.google.com/schemas/sitemap-
image/1.1"
xmlns:video="http://www.google.com/schemas/sitemap-
video/1.1">
<url>
Copyright © 2020-2021 techblog369.in Privacy Plolicy
<loc>https://localhost:3000/blog/token-authentication-requirements-for-git-operations</loc>
</url>
<url>
<loc>https://localhost:3000//blog/how-to-migrate-or-
configure-word-press-database-from-one-hosting-server-to-
another-server</loc>
</url>
<url>
<loc>https://localhost:3000//blog/how-to-install-ck-editor-
on-strapi</loc>
</url>
<url>
<loc>https://localhost:3000/blog/how-to-remove-html-and-
php-extension-from-url-using-htaccess</loc>
</url>
<url>
<loc>https://localhost:3000/blog</loc>
</url>
<url>
<loc>https://localhost:3000/news</loc>
</url>
<url>
<loc>https://localhost:3000/</loc>
</url>
</urlset>