How to setup a Sitemaps with the NuxtJs

How to setup a Sitemaps  with the NuxtJs

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.

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

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Share Code Between NuxtJS Projects?

5 Tips for Sharing Code Between NuxtJS Projects - How to share code between NuxtJS projects? What are the challenges to sharing code between Nuxt projects? Normally shared code is in the form of an npm package with importable components, and that can be done with Nuxt

A Thorough Introduction to NuxtJS

NuxtJS is a framework built on top of VueJS. The biggest benefits you get out of the box are server-side rendering and automatic code splitting. You also get...

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

Nuxtjs, Vuejs, Vuetify, Youtube Clone - Comment Section - Tricking Library Ep26

In this tutorial we implement a simple youtube comment section clone in our nuxtjs/vuejs app, using vuetify.

Auto Load Vuejs Components in Nuxt

With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading.