fix(builder, module): addLayout and nuxt.config precedence over auto-scanned layouts (#4702)

packages/builder/src/builder.js

@@ -335,6 +335,7 @@ export default class Builder {
 
     // -- Layouts --
     if (fsExtra.existsSync(path.resolve(this.options.srcDir, this.options.dir.layouts))) {
+      const configLayouts = this.options.layouts
       const layoutsFiles = await glob(`${this.options.dir.layouts}/**/*.{${this.supportedExtensions.join(',')}}`, {
         cwd: this.options.srcDir,
         ignore: this.options.ignore
@@ -352,8 +353,10 @@ export default class Builder {
           }
           return
         }
-        // .vue file takes precedence over other extensions
-        if (!templateVars.layouts[name] || /\.vue$/.test(file)) {
+        // Layout Priority: module.addLayout > .vue file > other extensions
+        if (configLayouts[name]) {
+          consola.warn(`Duplicate layout registration, "${name}" has been registered as "${configLayouts[name]}"`)
+        } else if (!templateVars.layouts[name] || /\.vue$/.test(file)) {
           templateVars.layouts[name] = this.relativeToBuild(
             this.options.srcDir,
             file

packages/core/src/module.js

@@ -71,9 +71,15 @@ export default class ModuleContainer {
 
   addLayout(template, name) {
     const { dst, src } = this.addTemplate(template)
+    const layoutName = name || path.parse(src).name
+    const layout = this.options.layouts[layoutName]
+
+    if (layout) {
+      consola.warn(`Duplicate layout registration, "${layoutName}" has been registered as "${layout}"`)
+    }
 
     // Add to nuxt layouts
-    this.options.layouts[name || path.parse(src).name] = `./${dst}`
+    this.options.layouts[layoutName] = `./${dst}`
 
     // If error layout, set ErrorPage
     if (name === 'error') {

test/fixtures/module/layouts/layout.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Layouts</h1>
+    <Nuxt />
+  </div>
+</template>

test/unit/module.test.js

@@ -1,9 +1,10 @@
-import { normalize } from 'path'
+import { normalize, resolve } from 'path'
 import consola from 'consola'
 import { loadFixture, getPort, Nuxt, Builder, rp } from '../utils'
 
 let port
 const url = route => 'http://localhost:' + port + route
+const rootDir = resolve(__dirname, '..', 'fixtures/module')
 
 let nuxt = null
 // let buildSpies = null
@@ -24,7 +25,7 @@ describe('module', () => {
     expect(html).toContain('<h1>TXUN</h1>')
   })
 
-  test('Layout', async () => {
+  test('Layout - layouts from Module.addLayout take precedence', async () => {
     expect(nuxt.options.layouts.layout).toContain('layout')
 
     const { html } = await nuxt.server.renderRoute('/layout')
@@ -74,6 +75,13 @@ describe('module', () => {
     expect(consola.warn).toHaveBeenCalledWith('addVendor has been deprecated due to webpack4 optimization')
   })
 
+  test('AddLayout - duplicate layout', () => {
+    nuxt.moduleContainer.addLayout(resolve(rootDir, 'modules', 'basic', 'layout.vue'))
+    expect(consola.warn).toHaveBeenCalledWith(
+      expect.stringContaining('Duplicate layout registration, "layout" has been registered as "./basic.layout.')
+    )
+  })
+
   test('Lodash - deprecated', async () => {
     const builder = new Builder(nuxt)
     await builder.generateRoutesAndFiles()