DEV Community 👩‍💻👨‍💻

Cover image for Introduction to Nuxt modules
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

Introduction to Nuxt modules

Developing my first Nuxt module took much more time than I expected, probably because I had no experience in creating such modules whatsoever. I spent hours reading Nuxt.js documentation (which is very good btw), watching tutorials, inspecting code repositories of other modules, so I was finally able to create my first module -> Adyen payment module for Nuxt. But don't worry. To built a second module, it took only 3 hours (including reading platform docs ;))

One of the best sources of knowledge so far about creating Nuxt modules is an article by @debs_obrien -> https://nuxtjs.org/tutorials/creating-a-nuxt-module/. Definitely worth checking out alongside this article to build your next (Nuxt ;) ) module.

What is a Nuxt module?

Nuxt.js has a very good documentation on the purpose and anatomy of modules, so I will just copy/paste some short definitions here.

Nuxt provides a higher-order module system that makes it possible to extend the core. Modules are functions that are called sequentially when booting Nuxt.

export default {
 modules: [
   // Using package name
   '@nuxtjs/axios',

   // Relative to your project srcDir
   '~/modules/awesome.js',

   // Providing options
   ['@nuxtjs/google-analytics', { ua: 'X1234567'