Adds support for folders in /layouts

lib/builder/builder.js

@@ -227,10 +227,10 @@ export default class Builder extends Tapable {
 
     // -- Layouts --
     if (fs.existsSync(resolve(this.options.srcDir, 'layouts'))) {
-      const layoutsFiles = await glob('layouts/*.vue', { cwd: this.options.srcDir })
+      const layoutsFiles = await glob('layouts/**/*.vue', { cwd: this.options.srcDir })
       let hasErrorLayout = false
       layoutsFiles.forEach((file) => {
-        let name = file.split('/').slice(-1)[0].replace(/\.vue$/, '')
+        let name = file.split('/').slice(1).join('/').replace(/\.vue$/, '')
         if (name === 'error') {
           hasErrorLayout = true
           return

test/fixtures/with-config/layouts/desktop/default.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Default desktop layout</h1>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(~/assets/roboto.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
+body {
+  font-family: 'Roboto';
+}
+</style>

test/fixtures/with-config/layouts/mobile/default.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>Default mobile layout</h1>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(~/assets/roboto.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
+body {
+  font-family: 'Roboto';
+}
+</style>
+

test/fixtures/with-config/pages/desktop.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Desktop page</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'desktop/default'
+}
+</script>
+

test/fixtures/with-config/pages/mobile.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Mobile page</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'mobile/default'
+}
+</script>
+

test/with-config.test.js

@@ -61,6 +61,22 @@ test('/test/about (custom layout)', async t => {
   t.true(html.includes('<h1>About page</h1>'))
 })
 
+test('/test/desktop (custom layout in desktop folder)', async t => {
+  const window = await nuxt.renderAndGetWindow(url('/test/desktop'))
+  const html = window.document.body.innerHTML
+  t.is(window.__NUXT__.layout, 'desktop/default')
+  t.true(html.includes('<h1>Default desktop layout</h1>'))
+  t.true(html.includes('<h1>Desktop page</h1>'))
+})
+
+test('/test/mobile (custom layout in mobile folder)', async t => {
+  const window = await nuxt.renderAndGetWindow(url('/test/mobile'))
+  const html = window.document.body.innerHTML
+  t.is(window.__NUXT__.layout, 'mobile/default')
+  t.true(html.includes('<h1>Default mobile layout</h1>'))
+  t.true(html.includes('<h1>Mobile page</h1>'))
+})
+
 test('/test/env', async t => {
   const window = await nuxt.renderAndGetWindow(url('/test/env'))
   const html = window.document.body.innerHTML
@@ -95,7 +111,7 @@ test('/test/about-bis (added with extendRoutes)', async t => {
 
 test('Check stats.json generated by build.analyze', t => {
   const stats = require(resolve(__dirname, 'fixtures/with-config/.nuxt/dist/stats.json'))
-  t.is(stats.assets.length, 27)
+  t.is(stats.assets.length, 35)
 })
 
 test('Check /test/test.txt with custom serve-static options', async t => {