Nuxt.js — Plugins and Modules
Tags: vue, webdev, programming, javascript
Published: 2021-01-19 21:33:58

**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.