feat(builder): support adding custom middlewares (#6342)

packages/builder/src/builder.js

@@ -416,7 +416,15 @@ export default class Builder {
 
   async resolveMiddleware ({ templateVars }) {
     // -- Middleware --
-    templateVars.middleware = await this.resolveRelative(this.options.dir.middleware)
+    const middleware = await this.resolveRelative(this.options.dir.middleware)
+
+    const extRE = new RegExp(`\\.(${this.supportedExtensions.join('|')})$`)
+
+    templateVars.middleware = middleware.map(({ src }) => {
+      const name = src.replace(extRE, '')
+      const dst = this.relativeToBuild(this.options.srcDir, this.options.dir.middleware, src)
+      return { name, src, dst }
+    })
   }
 
   async resolveCustomTemplates (templateContext) {

packages/builder/test/builder.generate.test.js

@@ -171,18 +171,25 @@ describe('builder: builder generate', () => {
   test('should resolve middleware', async () => {
     const nuxt = createNuxt()
     nuxt.options.store = false
+    nuxt.options.srcDir = '/var/nuxt/src'
     nuxt.options.dir = {
-      middleware: '/var/nuxt/src/middleware'
+      middleware: 'middleware'
     }
+    const middlewarePath = 'subfolder/midd.js'
     const builder = new Builder(nuxt, BundleBuilder)
     builder.resolveRelative = jest.fn(dir => [
-      { src: `${dir}/midd.js` }
+      { src: middlewarePath }
     ])
+    builder.relativeToBuild = jest.fn().mockReturnValue(middlewarePath)
 
     const templateVars = {}
     await builder.resolveMiddleware({ templateVars })
 
-    expect(templateVars.middleware).toEqual([ { src: '/var/nuxt/src/middleware/midd.js' } ])
+    expect(templateVars.middleware).toEqual([{
+      name: 'subfolder/midd',
+      src: 'subfolder/midd.js',
+      dst: 'subfolder/midd.js'
+    }])
   })
 
   test('should custom templates', async () => {

packages/vue-app/template/middleware.js

@@ -1,8 +1,11 @@
 const middleware = {}
-<% middleware.forEach(m => {
+<% for (const m of middleware) {
-   const name = m.src.replace(new RegExp(`\\.(${extensions})$`), '')
+  // TODO: remove duplicate logic in v3 (see builder.resolveMiddleware)
+  const name = m.name || m.src.replace(new RegExp(`\\.(${extensions})$`), '')
+  const dst = m.dst || relativeToBuild(srcDir, dir.middleware, m.src)
 %>
-middleware['<%= name %>'] = require('<%= relativeToBuild(srcDir, dir.middleware, m.src) %>');
+middleware['<%= name %>'] = require('<%= dst %>');
 middleware['<%= name %>'] = middleware['<%= name %>'].default || middleware['<%= name %>']
-<% }) %>
+<% } %>
+
 export default middleware