Nuxt.js — Plugins and Modules

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Nuxt.js is an app framework that’s based on Vue.js.

We can use it to create server-side rendered apps and static sites.

In this article, we’ll look at how to use plugins on client and server-side environments and create modules.

Client or Server-Side Plugins

We can configure plugins to be only available on client or server-side.

One way to do this is to add client.js to the file name to create a client-side only plugin.

And we can add server.js to the file name to create a server-side only plugin.

To do this, in nuxt.config.js , we can write:

export default {
  plugins: [
    '~/plugins/foo.client.js',
    '~/plugins/bar.server.js',
    '~/plugins/baz.js'
  ]
}

If there’s no suffix, then the plugin is available in all environments.

We can do the same thing with the object syntax.

For example, we can write:

export default {
  plugins: [
    { src: '~/plugins/both-sides.js' },
    { src: '~/plugins/client-only.js', mode: 'client' },
    { src: '~/plugins/server-only.js', mode: 'server' }
  ]
}

The mode property can be set to 'client' to make the plugin available on the client-side.

To make a plugin available on server-side, we can set the mode to 'server' .

For plugins that are only available on server-side, we can check if process.server is true in the plugin code before we run the code.

Also, we can check if process.static is true before we run the plugin code on static pages.

Nuxt.js Modules

Nuxt.js comes with a few modules that we can use to extend Nuxt’s core functionality.

@nuxt/http is used to make HTTP requests.

@nuxt/content is used to write content and fetch Markdown, JSON, YAML, and CSV files through a MongoDB like API.

@nuxtjs/axios is a module used for Axios integration to make HTTP requests.

@nuxtjs/pwa is used to create PWAs.

@nuxtjs/auth is used for adding authentication.

Write a Module

We can create our own modules.

To add one, we can create a file in the modules folder.

For example, we can create a modules/simple.js file and write:

export default function SimpleModule(moduleOptions) {
  // ...
}

Then we can add the module into nuxt.config.js so that we can use it:

modules: [
  ['~/modules/simple', { token: '123' }]
],

Then object in the 2nd entry is passed into the SimpleModule function as its argument.

Modules may be async.

Build-only Modules

We can create build-only modules and put them in the buildModules array in nuxt.config.js .

For example, we can write:

modules/async.js

import fse from 'fs-extra'

export default async function asyncModule() {
  const pages = await fse.readJson('./pages.json')
  console.log(pages);
}

We added the fs-extra module to read files.

The function is async, so it returns a promise with the resolved value being what we return.

In nuxt.config.js , we add:

buildModules: [
  '~/modules/async'
],

to add our module.

The module will be loaded when we run our dev server or at build time.

Conclusion

We can create modules and plugins that are available on the client or server-side with Nuxt.