Nuxt.js: ModuleContainer API for adding middleware

[rchl]

What problem does this feature solve?

Simplifies adding middlewares from modules.

Currently (assuming that middleware is added programmatically from a module, without user interaction), to add a middleware from a module, one has to:
a) add a middleware using either this.addTemplate or this.addPlugin.
b) add a plugin using this.addPlugin
c) from the plugin added in previous point, one has to import middleware added in point 'a' just to trigger a side effect of it registering itself in nuxt's middleware array

This is how official auth-module does it* at least and I couldn't find an easier way.

So basically we have to add a plugin just so that it can trigger registration of our custom middleware. It would make sense to be able to skip the plugin step and just add a middleware using function exposed in ModuleContainer api (so just something like this.addMiddleware() from a module.

• https://github.com/nuxt-community/auth-module/blob/abfa084184240b76d7071c20002a5e96821916f9/lib/module/plugin.js

What does the proposed changes look like?

Add this.addMiddleware() function in ModuleContainer API (this object in a module) for having an easy way of adding a middleware without using extra plugin.

_{This feature request is available on Nuxt community (#c7796)}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[alexbonhomme]

Totally agree with you. This feature is missing and the lack of documentation require reverse engineering on other module.
For the record and to complete your explanations, you can also use a side effect off addPlugin to auto-register you middleware code :

index.js

  this.addPlugin({
    src: path.resolve(__dirname, 'middleware.js'),
    fileName: './middleware.js'
  })

middleware.js

import Middleware from '../../middleware'

Middleware.auth = function ({ req, app }) {
  if (!process.server) {
    return
  }

  // some code
}

Not that much sexy, but that avoid an useless file.

[manniL]

@alexbonhomme Unfortunately integrating that function isn't as straightforward. 🙈

[wahengchang]

do u guys find a solution ?

[galvez]

@wahengchang for now, import middleware.js from a plugin as @alexbonhomme suggested.

[illjah42]

Totally agree with you. This feature is missing and the lack of documentation require reverse engineering on other module.
For the record and to complete your explanations, you can also use a side effect off addPlugin to auto-register you middleware code :

index.js

  this.addPlugin({
    src: path.resolve(__dirname, 'middleware.js'),
    fileName: './middleware.js'
  })

middleware.js

import Middleware from '../../middleware'

Middleware.auth = function ({ req, app }) {
  if (!process.server) {
    return
  }

  // some code
}

Not that much sexy, but that avoid an useless file.

You also need to add

this.options.router.middleware.push('auth')

...or it wouldn't work