feat: custom layouts directory

lib/builder/builder.js

@@ -271,8 +271,8 @@ module.exports = class Builder {
     }
 
     // -- Layouts --
-    if (existsSync(resolve(this.options.srcDir, 'layouts'))) {
-      const layoutsFiles = await glob('layouts/**/*.{vue,js}', {
+    if (existsSync(resolve(this.options.srcDir, this.options.dir.layouts))) {
+      const layoutsFiles = await glob(`${this.options.dir.layouts}/**/*.{vue,js}`, {
         cwd: this.options.srcDir,
         ignore: this.options.ignore
       })
@@ -297,7 +297,7 @@ module.exports = class Builder {
       if (!templateVars.components.ErrorPage && hasErrorLayout) {
         templateVars.components.ErrorPage = this.relativeToBuild(
           this.options.srcDir,
-          'layouts/error.vue'
+          `${this.options.dir.layouts}/error.vue`
         )
       }
     }
@@ -639,11 +639,11 @@ module.exports = class Builder {
   watchFiles() {
     const src = this.options.srcDir
     let patterns = [
-      r(src, 'layouts'),
+      r(src, this.options.dir.layouts),
       r(src, 'store'),
       r(src, 'middleware'),
-      r(src, 'layouts/*.{vue,js}'),
-      r(src, 'layouts/**/*.{vue,js}')
+      r(src, `${this.options.dir.layouts}/*.{vue,js}`),
+      r(src, `${this.options.dir.layouts}/**/*.{vue,js}`)
     ]
     if (this._nuxtPages) {
       patterns.push(

lib/common/options.js

@@ -286,6 +286,7 @@ Options.defaults = {
   },
   dir: {
     assets: 'assets',
+    layouts: 'layouts',
     pages: 'pages',
     static: 'static'
   },

test/custom-dirs.test.js

@@ -33,6 +33,11 @@ test('/ (custom assets directory)', async t => {
   t.true(html.includes('.global-css-selector'))
 })
 
+test('/ (custom layouts directory)', async t => {
+  const { html } = await nuxt.renderRoute('/')
+  t.true(html.includes('<p>I have custom layouts directory</p>'))
+})
+
 test('/ (custom pages directory)', async t => {
   const { html } = await nuxt.renderRoute('/')
   t.true(html.includes('<h1>I have custom pages directory</h1>'))

test/fixtures/custom-dirs/custom-layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <nuxt/>
+    <p>I have custom layouts directory</p>
+  </div>
+</template>

test/fixtures/custom-dirs/nuxt.config.js

@@ -2,6 +2,7 @@ module.exports = {
   css: [{ src: '~/custom-assets/app.css' }],
   dir: {
     assets: 'custom-assets',
+    layouts: 'custom-layouts',
     pages: 'custom-pages',
     static: 'custom-static'
   }