feat(builder, module): allow error layouts to be added through addLay…

…out. closes nuxt#3194. (nuxt#3834)
guohao214 · Sep 2, 2018 · 6e8a515 · 6e8a515
1 parent 7247968
commit 6e8a515
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/lib/builder/builder.js b/lib/builder/builder.js
@@ -223,15 +223,19 @@ export default class Builder {
         cwd: this.options.srcDir,
         ignore: this.options.ignore
       })
-      let hasErrorLayout = false
       layoutsFiles.forEach((file) => {
         const name = file
           .split('/')
           .slice(1)
           .join('/')
           .replace(/\.(vue|js)$/, '')
         if (name === 'error') {
-          hasErrorLayout = true
+          if (!templateVars.components.ErrorPage) {
+            templateVars.components.ErrorPage = this.relativeToBuild(
+              this.options.srcDir,
+              file
+            )
+          }
           return
         }
         if (!templateVars.layouts[name] || /\.vue$/.test(file)) {
@@ -241,12 +245,6 @@ export default class Builder {
           )
         }
       })
-      if (!templateVars.components.ErrorPage && hasErrorLayout) {
-        templateVars.components.ErrorPage = this.relativeToBuild(
-          this.options.srcDir,
-          `${this.options.dir.layouts}/error.vue`
-        )
-      }
     }
     // If no default layout, create its folder and add the default folder
     if (!templateVars.layouts.default) {

diff --git a/lib/core/module.js b/lib/core/module.js
@@ -71,6 +71,16 @@ export default class ModuleContainer {
 
     // Add to nuxt layouts
     this.options.layouts[name || path.parse(src).name] = `./${dst}`
+
+    // If error layout, set ErrorPage
+    if (name === 'error') {
+      this.addErrorLayout(dst)
+    }
+  }
+
+  addErrorLayout(dst) {
+    const relativeBuildDir = path.relative(this.options.rootDir, this.options.buildDir)
+    this.options.ErrorPage = `~/${relativeBuildDir}/${dst}`
   }
 
   addServerMiddleware(middleware) {

diff --git a/test/fixtures/module/modules/layout/index.js b/test/fixtures/module/modules/layout/index.js
@@ -0,0 +1,6 @@
+import { resolve } from 'path'
+
+export default function module() {
+  this.addLayout(
+    { src: resolve(__dirname, 'some-error.vue') }, 'error')
+}
diff --git a/test/fixtures/module/modules/layout/some-error.vue b/test/fixtures/module/modules/layout/some-error.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>You should see the error in a different Vue!</h1>
+</template>
diff --git a/test/fixtures/module/nuxt.config.js b/test/fixtures/module/nuxt.config.js
@@ -3,6 +3,7 @@ export default {
   modules: [
     '~~/modules/basic',
     '~/modules/hooks',
+    '~/modules/layout',
     {
       src: '~/modules/middleware',
       options: {

diff --git a/test/unit/module.test.js b/test/unit/module.test.js
@@ -31,6 +31,11 @@ describe('module', () => {
     expect(html.includes('<h1>Module Layouts</h1>')).toBe(true)
   })
 
+  test('/404 should display the module error layout', async () => {
+    const { html } = await nuxt.renderRoute('/404')
+    expect(html).toContain('You should see the error in a different Vue!')
+  })
+
   test('Hooks', () => {
     expect(nuxt.__module_hook).toBe(1)
     expect(nuxt.__renderer_hook).toBe(2)