Hey to everyone reading this! In this article, I’d like to investigate the different options of creating sitemaps in Nuxt using the sitemap module.

If you want to create a sitemap of all your routes and pages and add dynamic routes, request your back-end API, or even if you want to create multiple sitemaps with a sitemap index file, this module will provide you with everything you want.

Contents

• Sitemap module options.
• Simple single sitemap with routes.
• Sitemap with requesting from API.
• Sitemap for several indexes.
• Sitemap for multi-lang websites.

Module Options

Here are all the options available:

nuxt-community/sitemap-module

• route(array | function)
  You can manually add routes there to definitely put in the sitemap or use that property to request the routes from an API, so it can be dynamically generated from your DB.

import axios from 'axios';
//...
{
  routes: [
    'catalog/best-offers',
    'catalog/chairs'
  ],
  // or
  routes: () => {
    return axios.get(`my.own.api.com/getSitemapRoutes`);
  }
}

nuxt.config.js

Static routes property and function to get routes

• path (string)
  This is a path to the sitemap. The default is /sitemap.xml for normal and /sitemapindex.xml if you use the sitemaps property.
• hostname (string)
  If you define the hostname, it will be overridden for all the routes, regardless of the application domain. Module logic is that if the hostname is not defined, the application checks if the current request is HTTPS or not, and gets the current application domain. Then, the module builds a hostname based on that. If you use nuxt-i18n and your app has several domains, the module should clearly define the current application based on the requesting domain.
• cacheTime (number)
  This is the caching TTL of the sitemap routes that you defined before.
• exclude (string[])
  Here, you can either exclude some static routes for your Nuxt application:

// ...
{
  exlude: [
    'catalog/',
    'blog-*/',
    '*.html',
  ]
}

nuxt.config.js

Exclude with wildcard

Or, specifically for the sitemap index, when you don’t want to duplicate static routes for each sitemap, you can do this:

// **
{
  sitemaps: [
    {
      path: 'sitemap-normal.xml',
      exclude: [
        '/cabinet',
        '/cabinet/*',
        '/cabinet/recruiter/*',
        '/account-removed',
        '/search-by-cv',
      ],
    },
    {
      path: 'sitemap-popular.xml',
      routes: getPopularSitemap,
      exclude: ['/**'],
    },
    {
      path: 'sitemap-some-other.xml',
      routes: getSitemapSomeOtherLinks,
      exclude: ['/**'],
    },
  ]
}

nuxt.config.js

Exclude static routes

• filter (function)
  You can pass a function to filter all options that Nuxt generates automatically from your routes. Example: https://github.com/nuxt-community/sitemap-module#filter-optional—function
• gzip (boolean)
  Zip or not, it is up to you to decide.

Simple Single Sitemap With Routes

So, usually if you have your own portfolio website or something like that, you want to generate a sitemap only with your static routes. Imagine that you have this structure for your website:

Pages:

• Blog
• Projects
• Posts
• Etc.
• Index.vue

And in the end, you just want to put it in the sitemap. You might end up with something like this:

sitemap: {
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60 * 2,
    trailingSlash: true,
    gzip: true
},

nuxt.config.js

Simple sitemap configuration

Sitemap With Dynamic Routes

What do I mean by dynamic routes? Here is a route like /blog/_post.vue, when you have a page of an element or something else.

In that case, the module cannot generate those IDs on its own, of course, and that’s when the routes property comes in handy:

import axios from 'axios';
//...
sitemap: {
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60 * 2,
    trailingSlash: true,
    gzip: true,
    routes: () => {
      return axios.get(`my.own.api.com/getSitemapRoutes`);
    }
},
//or
import getRoutes from '../util.js'
//...
{
  routes: getRoutes
}

nuxt.config.js

Sitemap with dynamic routes

Several Indexes

Now, having some static routes and dynamic routes, maybe it makes sense to have separate sitemaps for those.

It becomes even more convenient when you have a lot of dynamic URLs and you want to separate them in different sitemaps. Here is my implementation of that:

import axios from 'axios';
//...
const getSitemapBlogsFn = sitemapIndex => () =>
    axios.get(`http://my.own.api/sitemap_routes?index=${sitemapIndex}`)
        .then(response => response && response.data)
        .then(offers =>
            offers.map(({ code }) => ({
                url: `http://myblog.org/blog/${code}`,
                changefreq: 'daily',
                priority: 1,
            })),
        );

const getSitemapsConfigurations = () =>
    range(30).map(index => ({
        path: `sitemap-${index}.xml`,
        routes: getSitemapBlogsFn(index),
        cacheTime: 1000 * 60 * 60 * 2,
        trailingSlash: true,
        exclude: ['/**'], //here we exclude all static routes
    }));
//...
{
sitemap: {
      path: '/sitemap.xml',
      sitemaps: 
      [
          {
              path: 'sitemap-routes.xml',
              cacheTime: 1000 * 60 * 60 * 2,
              trailingSlash: true,
          },
          ...getSitemapsConfigurations(),
      ],
    },
}

nuxt.config.js

Implementation of a function to create multiple sitemaps

Under the hood in the back end, based on the index parameter, you need to change the OFFSET requesting elements.

Sitemap for a Multi-Language Website

Here, the only detail to worry about is not to set the hostname so the domain will be taken from the request that will come to the Nuxt server.

Also, in case your domain hosting is via CNAME or Load balancer, then the request that will come to Nuxt will not be HTTPS, but simple HTTP.

In that case, you need to make sure that your x-forwarded-proto is set to HTTP in a request. Then, the module will recognize that the original request was HTTP and it will put an HTTPS link to the sitemap.

On clusterjobs.de we have that option, when we need to have a multi-index sitemap that is dynamic and responds to each language domain. And, in the end, that module comes quite handy. I started using it a year ago, only with the routes and static routes options and it grew a lot.

Hopefully, it was useful and it improves your Nuxt application or encourages you to use this incredible framework!

#nuxtjs #nuxt #vuejs #javascript