8 Essential NuxtJS Modules For Your Next Vue.js Project
Tags: Plugins, JavaScript, Vuejs, Nuxtjs, Programming

8 Essential NuxtJS Modules For Your Next Vue.js Project Yuyu Follow Mar 16 · 4 min read

I’ve been a fan of NuxtJS — a framework built on top of Vue.js — right from the beginning. NuxtJS makes your development faster and easier as it optimizes your code out of the box for the best performance. One of the features that I love is the Server Side Rendered (SSR) that plays an important role in your SEO strategy.

NuxtJS is also a popular choice for Static Site Generation (SSG) or commonly known as JAMStack — which is a hot topic among the Front End communities. I recently built an Open Graph checker tool hosted on Netlify — a popular static hosting for static sites.

In this article, I’ll share with you 8 essential NuxtJS modules for your next NuxtJS project.

1. PWA

The PWA module is probably one of the most popular NuxtJS modules. Progressive Web Apps (PWA) are reliable, fast and engaging applications with offline caching, push notification, and add to home screen features.

This module provides a sable PWA solution out of the box with almost zero configuration.

Link: https://github.com/nuxt-community/pwa-module

2. Axios

Axios is a popular Javascript library used to make HTTP requests. It supports Promise API and does an automatic transformation of JSON data. When building a Vue.js or NuxtJS app, you’ll most likely make a third-party API call or to your own ServerMiddleware. This module from the NuxtJS team that provides secure and easy Axios integration for making HTTP requests.

You could integrate the module with the Proxy module which is highly recommended to prevent CORS and production/deployment problems. What I like about this module is the integration with the NuxtJS progress bar when making HTTP requests.

Link: https://github.com/nuxt-community/axios-module

3. i18n

If you’re looking to add an internalization feature to your Nuxt app or simply loading translated content, this module could save your time. The nuxt-i18n module uses vue-i18n under the hood, on top of that it adds powerful routes generation feature that automatically adds locale prefixes to the default routes. You could also specify different subdomains for each locale you support.

What I like the most out of this module is the SEO option. When you enabled this option, nuxt-i18n will try to inject HTML attributes and metadata to improve your page SEO. More on that here.

Link: https://github.com/nuxt-community/nuxt-i18n

4. Sitemap

If you didn’t set up a sitemap in your project, you’re not getting the best out of your SEO. A sitemap helps search engines (e.g Google) and spiders (e.g GoogleBot) to discover pages on your website. While you could add this manually to the search console, it becomes a problem once your site grows in size or uses dynamic routes.

The sitemap module automatically generates static routes to the sitemap, you could also define your own function for generating dynamic routes.

If set up properly, you could access your sitemap via “/sitemap.xml” and submit it to Google Search Console.

Example of sitemap is https://www.opengraph.xyz/sitemap.xml

Link: https://github.com/nuxt-community/sitemap-module

5. Redirect

URL redirection plays an important role in SEO as it affects your SERP rankings and there’s no easy way to create and maintain redirects in a NuxtJS app.

You might ask when do you need to redirect your URLs? When you delete a page indexed by the search engine, or when you change your application URL structures, or when you switch to a new domain.

The redirect module makes it easy for you to add your redirect rules on your nuxt.config.js file.

The only GOTCHA with this module is it won’t work for Static Site Generation. So if you run `nuxt generate` or host your app in Netlify, it won’t work.

Link: https://github.com/nuxt-community/redirect-module

6. Sentry

If you spent too much time fixing errors on your application, setting up an error tracking tool could save you tons of time.

This module enables you to log your application through Sentry — an error tracking tool that provides real-time error tracking and intelligent deduplication.

Sentry is easy to set up and it has a free plan that lets you log 5,000 errors per month and keep the error history for 1 month.

Link: https://github.com/nuxt-community/sentry-module

7. Moment

If you’ve used Moment.js library on your project before, you’ll know it’s infamous for its huge bundle size that cripples your app performance. This module removes any unused Moment.js locales for much less bundle size.

So if you’re thinking of using Moment.js in your Nuxt app, use this module for better performance.

Link: https://github.com/nuxt-community/moment-module

Note: As an alternative to Moment, you could use DayJS instead which has similar functionalities and up to 90% reduction in file size.

Link: https://github.com/potato4d/nuxt-dayjs-module

8. Analytics

This module integrates with the vue-analytics library, making it easy to set up Google Analytics on your NuxtJS app. The library supports various tracking such as page tracking, event tracking, and screen tracking.

If you use Vuex, this library allows you to fire tracking events directly in your store.

Link: https://github.com/nuxt-community/analytics-module