Forem: Mikhail Starikov

Working With Sitemaps in Nuxt.js

Mikhail Starikov — Tue, 28 Sep 2021 14:27:41 +0000

Create a sitemap of routes, pages, and dynamic routes

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.

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!

A Year With Nuxt.js - A Genuine Review of a Framework

Mikhail Starikov — Fri, 25 Oct 2019 13:40:32 +0000

For more than a year I am working with nuxt.js on daily basis. In this review I would try to summarize all ups and downs while working with a framework. Hopefully this article may persuade you to try nuxt on your new project and you will also be aware of some caveats along the way, which I faced.

TL;TR

Have a year working with nuxt on daily basis.
Nuxt is a very convenient and amazing for production.
Nuxt is extendable and have lots of features and driven by vast and talented community
Nuxt have caveats, which have some workaround but nothing is ideal :)

Benefits

performant
structure
community
documentation (guides for testing, guides for deploying)
modules (i18n, sitemap, svg, apollo, axios, pwa, sentry, GA, GTM)

Caveats

shared state problem (node problem)
is-https and heroku (i18n multi domains, sitemap)
this everywhere
weak rx.js support

One remark before I start, I don't know if it was an idea, but I just love how nuxt logo is mountain, like you are behind a reliable wall.

nuxt mountains logo

Using nuxt is like living in a mountains in calm and peace :)

Project

First of all I want to give a small introfuction to the project. A year ago, in Oktober 2018 my friend rami alsalman (Ph.D. in machine learning!) approached me and shared the pain of using job websites nowadays, f.e. you are trying to find Software Backend Engineer php and you get a list of offers, with python, C#, ASP.net and so on.

All in all relevancy is poor sometimes because the recognition of offer description - like recognition of required programming skills, soft skills is the problem on it's own.

The idea was to build a search system only around machine learning algorythms that will recognise any job offer description text, any search text and applicant CV, so we could directly show most matching jobs based on CV.

That is how we came up with idea of clusterjobs.de. I was responsible for web application and became CTO of a startup and my friend became a CEO and machine learning search engine engineer.

Search by CV with skills recognition

Why nuxt?

First of all I wanted to start a project with a long-term framework that will help us start fast and extend it in future. Other main point was to have SSR, cause we wanted to have sustainable SEO as a main traffic channel. Having php on a backend for SSR would lead to duplicating all the templates and double work, which we couldn't afford, cause the dev team is just me :).

I started to investigate javascript SSR solutions and nuxt seemed clearly a winner. There was 2.0.0 major release and good documentation, and decided to take a risk with a new technology on a new project and take nuxt as a framework for clusterjobs.

Deployment and CD with nuxt

To save some time on manual deployments I invested couple of days to set up proper Gitlab pipeline to deploy app to heroku.
Here is a great article on nuxt docs about deploying to heroku.
Here is a great article on how to deploy vue on heroku in gitlab Pipeline.
Combine them together and BOOM! That is what I have at the moment:

A year of development

After all environment was done it took roughly 2–3 months to prepare MVP and go live. Numerous iterations and improvements afterwards and till now I did not regret at any point of time that I chose nuxt.
So why is it good? I thought of really best moments that I experienced and here they are:

Performance

It is performant, even though it is full js framework that need to deliver all library files to the client it still tries it's best to do it in less harmful way.

Lighthouse on slow 4G with 4x CPU slowdown on Mac pro

With last 2.10 update I found out guys have updated webpack config so during development only updated chunks are rebuild, which really speed up development. Also webpack for production is extendable and you could play around with it on your own, or use default config which is pretty performant on it's own.

My webpack build config. Here are the docs for this.

Structuring

The good advantage is that I as a developer didn't need to think where to put this or that. Nuxt comes with a skeleton of app, with everything you need to build complex web app. Pages, components, assets, static, middlewares, plugins and so on.
The only thing that pissed me off is that nuxt encourages you to use ~/component/blah-blah kind of stuff to import all over the application.
So and JetBrains IDE, that I love with a bottom of my heart, couldn't recognise those pathes.

WebStorm fails to recognise a path :(

Workaround for that is pretty simple:

Name this file phpstorm.webpack.config.js (Cause it is PHPStorm and not WEBStorm in my case 😛) and put it in the root folder of your nuxt app to make ~ in you import pathes work!

WebStorm is succeed to recognise a path now!

Community

Community is living, huge thanks to

Sébastien ChopinFollow

Author of Nuxt.js • Community partner of Vue.js • Open Source

who created nuxt itself and driving it till current moment, huge thanks to the Core Team and all contributors for such an amazing product. Probably if you tried nuxt you know these resources, but I just put them here:

Brand new updated nuxt website with guides, docs and everything you might be interested
Amazing platform for open source communities. All Issues, questions and so on regarding nuxt and nuxt-community modules

Modules

That is the thing that makes you love nuxt, really.
Coming from such a great community nuxt has readjusted vue modules, new modules, modules for everything. Found som not covered use-case in nuxt? Write a module, make it nuxt-community open source!
Here is a list of modules I use in production:

i18n
Internationalisation, with multi-domains for each language, working out of the box. Like isn't it awesome? Languages and separate domains is crucial for SEO and could improve your presence in Google results list heavily. And here you just need to add module, integrate it with your UI and that's it.
sitemap
Also super important thing that is needed for every prod website. This module will generate sitemap based on your routes. You could also use axios th request your API and get all dynamic routes or whatever you want.
svg
Use svg all over the app, but load them from auto-generated sprite
apollo
GraphQL is awesome!
pwa
PWA is our future, try to investigate this topic, if you still haven't done it yet! Upd. Samsung started to show PWA apps in Galaxy store!
sentry
get to know your user's pain with awesome service that will log all production errors for you.
GA, GTM
Necessary evil to track you app performance

Caveats

There was some problems of course during the year of working with nuxt.
Now I ll try to give context for each of them and help you avoid them in future:

Shared state on multiple requests in nuxt

This is related to how node.js works. If you have a global variable, it will be overwritten in simultaneous request.
Some insights are given in this Stack Overflow question.
The problem that I experienced was related to fetch function on my offer-list page (search results).
I was making action call like

Making search on server sideThat was done to populate store on server side and use the same offers on client side.
But when it is done inside action, like action -> commit -> store then for some reason that data is mixed.
I confess, I did not investigate the true reason of that, maybe some global object of Vuex store or something like that, but the problem was that
while I had my application running for first request, every next request got it's state. So you might end up landing here https://en.clusterjobs.de/search/fullstack developer and having machine learning engineer results.
Fix for that was:

Committing directly from fetch function.

So action -> back to fetch -> commit -> state. Action should return a Promise wich is resolved with proper data, which you could use back in fetch function.
Probably after that point commit calls where close to the end of fetch and page had correct data, but general problem might be still here.

Heroku and is-https

I am hosting app using cloudflare for DNS and heroku as a server. Pointing domain to heroku is done through CNAME. Which is giving me some problems.
Several modules of nuxt (sitemap, i18n) are using is-https library to identify on server side the type of request.
The request which is done to cloudlfare is https, but probably that proxying is not.
I got some advices in CMTY on that.

Enabling x-forwarded-proto should help, but I didn't try it so far

`this` everywhere

Personally I like to write functional code in js. It is possible with nuxt but all the modules makes you use this.
Want to get current locale in vuex store or in component? this.app.i18n.locale
THe same for switching locale and getting all locales list.
Wnat to change page in Vuex?
this.router.push
I can live with that, but having those objects as an arguments inside functions also could benefit for better code separation.

`Rx.js`

I love RX and love to apply it to especially state managing use cases.
RX could be integrated to vue js and to nuxt as well, if we are talking about DOM events. There is this package:
https://github.com/vuejs/vue-rx
To integrate it to nuxt, just create a plugin like this:

Put this file into plugins folder and add the plugin in nuxt.config.js. There were also couple of trials to integrate it into vuex, but so far repo is deprecated, and I haven't seen any articles regarding this in the late time.

Summarize

All in all I love nuxt, I even prepared a workshop for my fellow colleagues and did it couple of times to spread the knowledge and encourage them to try it.
I think it is a very mature and developed tool for any need. You could use it for everything starting from simple static landing, personal website, up to complex web application and ecommerce platform.
I faced some caveats, which are feasible to fix, but also I had a lot of great moments, when everything so simple and works so awesome.
I truly believe in that framework and deeply grateful to people that created it and are maintainig it till this very moment.
Thank you, nuxt, nuxt :P