Working With Sitemaps in Nuxt.js

Create a sitemap of routes, pages, and dynamic routes

Photo by Nik Shuliahin on Unsplash

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
*Automatically generate or serve dynamic sitemap.xml for Nuxt.js projects! Module based on the awesome sitemap.js…*github.com

• 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`);
  }
}

• 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:
  

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

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: ['/**'],
    },
  ]
}

• 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
},

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
}

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(),
      ],
    },
}

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 my startup clusterjobs.de we had 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 came quite handy.

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