20 Nuxt Modules (with Tips) to Increase Your Productivity and Build Web Apps Faster

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.

1. Nuxt Dotenv

• Repository: Link.
• Installation: 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
      }
    ]
  ]
};

2. Nuxt Style Resources

• Repository: Link.
• Installation: 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. 🚀

3. Nuxt Social Meta

• Repository: Link.
• Installation: 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"
      }
    ]
  ]
};

4. Nuxt Vuex Router Sync

• Repository: Link.
• Installation: 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"]
};

5. Nuxt MQ

• Repository: Link.
• Installation: 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.

6. Nuxt Axios

• Documentation: Link.
• Repository: Link.
• Installation: npm install @nuxtjs/axios.

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:

• Automatically setting the base URL for client and server-side (see below).
• Handy helpers like this.$axios.$get, this.$axios.$post, this.$axios.$put and this.$axios.$delete to return the payload data directly.
• Exposes 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
  }
};

7. Nuxt PWA

• Documentation: Link.
• Repository: Link.
• Installation: npm install @nuxtjs/pwa.

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
  }
};

8. Nuxt Sentry

• Repository: Link.
• Installation: 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
  }
};

9. Nuxt Auth

• Documentation: Link.
• Repository: Link.
• Installation: npm install @nuxtjs/auth @nuxtjs/axios.

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.

10. Nuxt Sitemap

• Repository: Link.
• Installation: 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.

11. Nuxt Local Tunnel

• Repository: Link.
• Installation: 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" }]
  ]
};

12. Nuxt Toast

• Repository: Link.
• Installation: 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"
        }
      }
    ]
  }
};

13. Nuxt ImageMin

• Repository: Link.
• Installation: 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.

14. Nuxt Webfontloader

• Repository: Link.
• Installation: 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"
      }
    ]
  }
};

15. Nuxt Google Analytics

• Repository: Link.
• Installation: 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"
  }
};

16. Nuxt Dropzone

• Documentation: Link.
• Repository: Link.
• Installation: npm install nuxt-dropzone.

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>

17. Nuxt PurgeCSS

• Repository: Link.
• Installation: 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
  }
};

18. Nuxt Router Module

• Repository: Link.
• Installation: 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
  }
};

19. Nuxt Maintenance Mode

• Repository: Link.
• Installation: 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)
  }
};

20. Nuxt Robots.txt

• Repository: Link.
• Installation: 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. 🤠