fix(builder): js layout (#4701)

[release]

packages/builder/src/builder.js

@@ -349,7 +349,8 @@ export default class Builder {
           }
           return
         }
-        if (!templateVars.layouts[name] && /\.vue$/.test(file)) {
+        // .vue file takes precedence over other extensions
+        if (!templateVars.layouts[name] || /\.vue$/.test(file)) {
           templateVars.layouts[name] = this.relativeToBuild(
             this.options.srcDir,
             file
@@ -382,6 +383,7 @@ export default class Builder {
         ignore: this.options.ignore
       })).forEach((f) => {
         const key = f.replace(new RegExp(`\\.(${this.supportedExtensions.join('|')})$`), '')
+        // .vue file takes precedence over other extensions
         if (/\.vue$/.test(f) || !files[key]) {
           files[key] = f.replace(/(['"])/g, '\\$1')
         }

test/fixtures/basic/layouts/custom.js

@@ -0,0 +1,10 @@
+export default {
+  render(h) {
+    return h('div',
+      [
+        h('h1', 'JS Layout'),
+        h('nuxt')
+      ]
+    )
+  }
+}

test/fixtures/basic/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <Nuxt />
+  </div>
+</template>

test/fixtures/basic/pages/custom.js

@@ -0,0 +1,6 @@
+export default {
+  layout: 'custom',
+  render(h) {
+    return h('h2', 'custom page')
+  }
+}

test/fixtures/spa/layouts/custom.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     Custom layout
-           <br>
+    <br>
-           <Nuxt />
+    <Nuxt />
   </div>
 </template>

test/fixtures/spa/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     Default layout
-            <br>
+    <br>
-            <Nuxt />
+    <Nuxt />
   </div>
 </template>

test/unit/basic.ssr.test.js

@@ -331,6 +331,13 @@ describe('basic ssr', () => {
     expect(html).toMatch('Hello unicode')
   })
 
+  test('/custom (js layout)', async () => {
+    const window = await nuxt.server.renderAndGetWindow(url('/custom'))
+    const html = window.document.body.innerHTML
+    expect(html).toMatch('<h1>JS Layout</h1>')
+    expect(html).toMatch('<h2>custom page</h2>')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()