How to generate sitemap for dynamic routes in nuxtjs application

Here in this article, we will learn to create sitemaps for dynamic routes in our nuxtjs application. It is not so easy to create the sitemaps easily with dynamic routes using the plugins like @nuxtjs/sitemap. As the documentation of the module says, you have to add all the routes in an array in the nuxt.config.js file.

Why do we need a Sitemap?

A sitemap is really important for Seo and getting our site visible on the web. It tells the search engine about how many pages are on our website and it also helps us to get our webpages to get index properly so that the search engines can see the pages.

Once we generate our sitemap, we need to submit it to Google Search Console, Bing Webmaster, etc. These search console tools help the search robot what they can see and to crawl through the page.

Adding a sitemap to your Nuxtjs Application

To add a sitemap to our application we will use the nuxtjs sitemap module, @nuxtjs/sitemap. Once we have npm install the module, we have to add the following code in our nuxt.config.js file.

Note: Always add sitemap at the end of the modules array.

modules: [
  "@nuxt/content",
  "@nuxtjs/sitemap",
],

Once you have added it to the module array, you need to add the sitemap configuration in the nuxt.config.js file too. The basic setting will be the hostname, exclude, and include fields and routes.

{
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/secret',
      '/admin/**'
    ],
    routes: [
      '/home',
      '/contact',
      '/services'
    ]
  }

Add Dynamic Routes to Nuxtjs

The above configuration is perfect for a small project, but if you are developing a bigger project with lots of dynamic pages then it will be hard to include all the routes manually in the routes array. Because the @nuxtjs/sitemap module doesn't create the routes array automatically, you have to add all the routes in the nuxt.config file manually.

{
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/dashboard',
      '/admin/**'
    ],
    routes: [
      'dynamic-route-one',
      'dynamic-route-two',
      'dynamic-route-three',
    ]
  }
}

However, after doing some research and reading some blogs and answers from StackOverflow, i was able to generate a sitemap with dynamic routes in my nuxt project.

Disclaimer: This might not be the perfect way but it worked for me.

So follow the step below to create the dynamic route sitemap after we have generated the pages. We will be using the generator class hooks to trigger the build of the sitemap. Learn more about them here.

Step 1: First npm install the @nuxtjs/sitemap in your project

Step 2: Add the module and configure it in the nuxt.config.js file.

  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap',
  ],

  sitemap: {
    hostname: 'https://programmingbasic.com/',
    gzip: true
  },

Step 3: Now we will create a generate.js file in the modules folder of the project. Here I am using the generate:done hook to generate the sitemap of all the dynamic routes once the pages are generated.

const generator = function () {
    this.nuxt.hook('generate:done', async (context) => {
   
      const routes = await Array.from(context.generatedRoutes)
   
      this.nuxt.options.sitemap.routes = await [...routes]
    })
  }

  
  export default generator

Step 4: Now just add the genrate.js file to buildModules array in your nuxt.config.js file. So the final code in the nuxt config file will look like this.

  buildModules: [
  '@/modules/generator',
  ],
    
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap',
  ],

  sitemap: {
    hostname: 'https://programmingbasic.com/',
    gzip: true
  },