The Nuxt community has come up with a lot of handy modules for common features that we always have to implement in a web application. So, here are 20 of my favorite Nuxt modules you should know about if you want to increase your productivity.
I always loved how much more productive I became when I started using Nuxt modules in my Vue applications. π Being able to install them with npm like any other package and configure them in one single spot (our nuxt.config.js
file) has always felt like a breeze.
But what is even more fantastic is that with time, the community has come up with a lot of handy modules for common features that we always have to implement in a web application.
β οΈ A word of caution, though: Do not confuse Nuxt modules with Nuxt plugins. I recommend that you read this thread on Github or that you head over to the official documentation if the differences between the two are not clear.
But in a nutshell: π©πΌπ«
We use a plugin when we need to execute something in our application on the client or server-side (i.e. when the server is doing SSR). Most of the time, it is about importing and configuring a given Vue plugin or library.
On the contrary, we use a module when we need to execute something when our application is booting up. A module is nothing more than a suite of functions that will be called sequentially upon nuxt server
or nuxt generate
. In other words, the framework will wait for every module to finish before continuing. This is why we can use them to extend our Nuxt application by registering special environment variables (what the Dotenv package listed below is doing) or making all our SASS variables and mixins available in all our files so that we do not have to import them in each one (what the Nuxt Style Resources package listed below is doing).
π₯ Now, without further ado, here are 20 of my favorite Nuxt modules you should know about if you want to increase your productivity.
npm install @nuxtjs/dotenv
.This module is about loading your .env file (that you should add to your .gitignore
) directly into your nuxt.js application context and process.env. This way you will be able to access them like this: process.env.API_URL
.
This is quite useful if you have global variables that you would like to define only once (e.g. API_URL
, APP_VERSION
, etc.) or that you do not want to push to production (e.g. MIXPANEL_TOKEN
, STRIPE_KEY
, etc.).
You can also choose which .env
file to use depending on your environment (development, staging, production, etc.). Here is how I proceed:
// nuxt.config.js
let envFileName;
// Retrieve the right config file
if (process.env.NODE_ENV === "production") {
envFileName = ".env.production";
} else {
envFileName = ".env.local";
}
module.exports = {
modules: [
[
"@nuxtjs/dotenv",
{
path: ".env",
filename: envFileName
}
]
]
};
npm install @nuxtjs/style-resources
.When using SASS, LESS or Stylus, you may have noticed that you must import your variables and mixins in every one of your Vue files before using them. This process can quickly become annoying and cumbersome.
This package aims to solve this issue. Just define the files that include your variables and mixins in styleResources
and the module will take care of importing them in all your Vue files. Et Voilà! π§πΌβοΈ No more extra @import statements needed.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/style-resources"],
styleResources: {
scss: [
// Global variables, site-wide settings, config switches, etc
"@/assets/settings/_settings.colors.scss",
// Site-wide mixins and functions
"@/assets/tools/_tools.backgrounds.scss",
"@/assets/tools/_tools.mq.scss"
]
}
};
Personal Note: A lot of people have asked me if this module could slow down the building time when developing the application. I’ve been using it for more than a year and a half, and so far I never noticed any drop in performance. So, I can confidently say that it is blazing fast. π
npm install nuxt-social-meta
.Adding the meta tags for social networks like Twitter and Facebook is a common good practice in modern web applications. Do you want to do it in less than 10 seconds and move on to your next task? Easy peasy!
// nuxt.config.js
module.exports = {
modules: [
[
"nuxt-social-meta",
{
title: "My Product | With Great Features",
description:
"An incredible description that will make you rank high in search engines.",
url: "https://www.example.com",
img: "/link_to_image_in_static_folder.jpg",
locale: "en-US",
twitter: "@twitterHandle",
themeColor: "#1B2432"
}
]
]
};
npm install nuxt-vuex-router-sync
.π As I could not find a clean way to get access to the $route
object in one of my Vuex stores, I used this module to enable vuex-router-sync in one line. The thing is that in a classic Vue application, you can usually get access to this object by simply importing your router file inside your store (with something like import router from @/router/index.js
). But as there is no router file inside Nuxt (remember, all routes are dynamically generated according to your pages
folder architecture), this package is like a heaven-sent gift from the gods of code. β©
// nuxt.config.js
module.exports = {
modules: ["nuxt-vuex-router-sync"]
};
npm install nuxt-mq
.Do you need to know which breakpoints are active when you are inside your JavaScript code? This package will let you do that in a snap. π
// nuxt.config.js
module.exports = {
modules: [["nuxt-mq"]],
mq: {
defaultBreakpoint: "desktop",
breakpoints: {
mobile: 768,
tablet: 1024,
desktop: 1400,
desktopWide: 2000,
desktopUltraWide: Infinity
}
}
};
Now you can easily change a button size from “default” to “small” for people on mobile just like this:
<base-button :size="$mq === 'mobile' ? 'small' : 'default">My Button Label</base-button>
Personal Note #1: It is using Nuxt-MQ behind the curtain. Be careful!
Personal Note #2: Don’t forget that media queries exist. This module does not aim to replace them but to provide a better solution in certain situations when you need for instance to dynamically update a given prop.
Most applications make HTTP calls to fetch data from an API. With this module, you will be able to configure axios in a few seconds and get access to this.$axios
anywhere in your application. Here are some handy features I really enjoy:
this.$axios.$get
, this.$axios.$post
, this.$axios.$put
and this.$axios.$delete
to return the payload data directly.setToken
function to this.$axios
so we can easily and globally set authentication tokens (once a user logged in, for instance).// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/axios"],
axios: {
baseURL: `https://api.example.com/`,
proxyHeaders: false,
credentials: false
}
};
This is the official Nuxt module to build progressive web apps. It comes with several great features that you can use depending on your needs (all of them are optional). My favorite ones are probably the ability to automatically generate the manifest.json
file as well as all the app icons from a single icon.png
file. It will save you time as you will not need to go back and forth to Sketch or Photoshop anymore. You can also register a service worker for offline caching and implement push notifications with OneSignal.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/pwa"],
axios: {
baseURL: `https://api.example.com/`,
proxyHeaders: false,
credentials: false
}
};
npm install @nuxtjs/sentry
.Sentry is a must-have for every developer who wants to fix and build reliable web applications. It will save and notify you about all exceptions triggered in your production environment. Thankfully, with this module, you can set it up in less than a minute. Create an account on Sentry and just add your DSN.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/sentry"],
sentry: {
dsn: "https://4b175105498572343508bc3ac8923e72@sentry.io/3847292", // Enter your project's DSN here
config: {} // Additional config
}
};
Another popular official module, this one is here to get you up and running with your authentication system in a minute. π It comes with pre-configured middleware to enable certain routes to authenticated users, a $auth service and different social providers like Facebook, Google or Github. You will also need the axios package to get it working.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/axios", "@nuxtjs/auth"],
auth: {
// Options
}
};
Personal Note: The authenticated users will be saved in a Vuex store, so make sure you understand how Vuex works before going further.
npm install @nuxtjs/sitemap
.Based on sitemap.js, it will automatically generate and serve dynamic sitemap.xml based on your pages
folder architecture. It works with all modes (universal, spa, generate). Here is how to install it and configure it. It will of course ignore all the dynamic routes, but you can run a function to generate them by yourself (more on this here π).
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/sitemap"],
sitemap: {
hostname: "https://example.com",
gzip: true,
exclude: ["/secret", "/admin/**"]
}
};
Personal Note: If you also need to generate an RSS feed, take a look at the feed module.
npm install @nuxtjs/localtunnel
.Do you need to show your work to someone without uploading it on a production server? Do you need to receive a webhook from a third-party application? This module will let you create a local tunnel and expose your localhost to the internet.
// nuxt.config.js
module.exports = {
modules: [
// Simple usage
"@nuxtjs/localtunnel",
// With options
["@nuxtjs/localtunnel", { subdomain: "foobar" }]
]
};
npm install @nuxtjs/toast
.All applications need to send in-app notifications to their users when certain events happen. Based on vue-toasted, you will get access to this.$toast
everywhere in your application and send error or successful messages to your visitors with $toast.show()
, $toast.success()
and $toast.error()
.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/toast"],
toast: {
position: "top-center",
register: [
// Register custom toasts
{
name: "my-error",
message: "Oops...Something went wrong",
options: {
type: "error"
}
}
]
}
};
npm install nuxt-imagemin
.Based on the popular imagemin library, seamlessly minify all your PNG, JPEG, GIF and SVG images to make your web applications load faster. Configure the optimization level for each.
// nuxt.config.js
module.exports = {
modules: [
[
"nuxt-imagemin",
{
optipng: { optimizationLevel: 5 },
gifsicle: { optimizationLevel: 2 }
}
]
];
}
;
Personal Note #1: If you are using webp
images, you can configure a custom plugin imagemin-webp
with this module.
Personal Note #2: You can also use the nuxt-optimized-images module which comes with additional features, like the ability to resize images.
npm install nuxt-webfontloader
.This module will help you install specific web fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck and load them asynchronously to increase the performance of your web application. It is built on top of Google’s/Typekit’s webfontloader, and comes with full support of SVGs as components.
// nuxt.config.js
module.exports = {
modules: ["nuxt-webfontloader"],
webfontloader: {
google: {
families: ["Lato:400,700"] //Loads Lato font with weights 400 and 700
}
},
// --> THUS, YOU DO NOT NEED THAT LINE ANYMORE <--
head: {
link: [
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css?family=Lato:400,700"
}
]
}
};
npm install @nuxtjs/google-analytics
.Need to install Google Analytics for the umpteenth time? Do it in ten seconds with this module and move on to your next task.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/google-analytics"],
googleAnalytics: {
id: "UA-12301-2"
}
};
If you need dropzone component compatible with server-side rendering, this module should be the answer you are looking for. It is powered internally by vue-dropzone and can be used as simply as:
// OneOfYourVueFile.vue
<template>
<dropzone id="foo" ref="el" :options="options" :destroyDropzone="true"></dropzone>
</template>
<script>
import Dropzone from 'nuxt-dropzone'
import 'nuxt-dropzone/dropzone.css'
export default {
components: {
Dropzone
},
data() {
return {
// See https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
options: {
url: "http://httpbin.org/anything"
}
}
},
mounted() {
// Everything is mounted and you can access the dropzone instance
const instance = this.$refs.el.dropzone
}
}
</script>
npm install nuxt-purgecss
.To get some performance improvements with your application, you may be interested in removing unused CSS. This module, built on top of purgecss, comes with mighty default settings and a webpack or PostCSS mode. It can be installed and configured like any other module and it just works wonders: π€
// nuxt.config.js
module.exports = {
modules: ["nuxt-purgecss"],
purgeCSS: {
// Overrides the default settings here
}
};
npm install @nuxtjs/router
.Tired of using the pages
directory to define your routes? You can still use your own router.js
file with this module like on any other Vue application.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/router"],
routerModule: {
path: "srcDir",
fileName: "router.js",
keepDefaultRouter: false
}
};
npm install nuxt-maintenance-mode
.This is a module for displaying a maintenance view as fallback while maintaining the app. It will also return a status code 503 to the client. As the author says:
This is the easiest and most effective way to put an application in maintenance state without compromising the SEO and the user’s access experience.
// nuxt.config.js
module.exports = {
modules: ["nuxt-maintenance-mode"],
maintenance: {
enabled: !!process.env.MAINTENANCE_MODE, // If given truthy value, activate maintenance mode on startup
path: "/maintenance", // maintenance fallback content routing
matcher: /^\/admin/ // Path to be in maintenance mode (regex)
}
};
npm install @nuxtjs/robots
.This module injects middleware to generate a robots.txt
file. It can be set up in a few seconds like this.
// nuxt.config.js
module.exports = {
modules: ["@nuxtjs/robots"],
robots: {
UserAgent: "*",
Disallow: "/"
}
};
Did I miss one of your favorites? Did you build a module that you think should be listed here? Feel free to tell me in the comments below or to reach out to me on Twitter @RifkiNada. π€
Nada is a JavaScript developer who likes to play with UI components to create interfaces with great UX. She specializes in Vue/Nuxt, and loves sharing anything and everything that could help her fellow frontend web developers. Nada also dabbles in digital marketing, dance and Chinese. You can reach her on Twitter @RifkiNada or visit her website, nadarifki.com.