Nuxt: How to add a module.

Nuxt: How to add a module. cover


Like Vue.js, Nuxt is very extensible. There's a lot of pre-packaged modules that you can directly install and integrate to your project. If you don't trust me, just take a look to this HUGE LIST of modules. In this article we will see how to add vuetify as a module in Nuxt.

Why this article ?

It's part of my blog category "Nuxt in here". This is a big tutorial compilation where the subject is nuxt and aoooio implementation.

What we will see:

  • 1 | Requirement
  • 2 | Adding module dependancy
  • 3 | Add module to nuxt configuration file.
  • 4 | Have fun with your new module !

1 Requirement

You will need a blank Nuxt application to follow this tutorial. I wrote an article explaining how to do this with vue-cli: article

If you already have a vue-cli environnement setup, just start a new project:

vue init nuxt-community/starter-template aoooio_module

then click 'Enter' until the command line setup is finished. You can now enter into the directory to let the magic happen.

cd aoooio_module

2 Adding module dependancy.

You now have a standard Nuxt project structure in the folder aoooio_module. We will now have to add the module to dependancies to be able to use it. It's simply an 'npm install something' command.

npm install --save-dev @nuxtjs/vuetify

Wait until npm has finished his work and you can now link the module to your project.

3 Add module to nuxt configuration file.

Great, we have our module available. To let know Nuxt that he can use it, we have to modify his configuration file. Open the nuxt.config.js file at the project root and add these lines just before the head object:

* add modules
buildModules: [
    // This let know nuxt about the vuetify plugin

4 Have fun with your new module !

We can now add a vuetify component in our page/index.vue. For example you can add a button to verify if everything went well.

<v-btn>This is my vuetify button</v-btn>

I hope you liked this article. I'll soon write another one on the way to fetch data in the SSR context of Nuxt (server side rendering).