Add layout in __NUXT__

lib/app/client.js

@@ -386,18 +386,10 @@ Promise.all(resolveComponents)
 .then((Components) => {
   const _app = new Vue(app)
 
-  let context = getContext({ to: router.currentRoute, isClient: true<%= (store ? ', store' : '') %> })
+  let layout = NUXT.layout || 'default'
-  let layoutName = 'default'
+  return _app.loadLayout(layout)
-  return callMiddleware.call(_app, Components, context)
   .then(() => {
-    layoutName = Components.length ? Components[0].options.layout : NuxtError.layout
+    _app.setLayout(layout)
-    if (typeof layoutName === 'function') {
-      layoutName = layoutName(context)
-    }
-    return _app.loadLayout(layoutName)
-  })
-  .then(() => {
-    _app.setLayout(layoutName)
     return { _app, Components }
   })
 })

lib/app/server.js

@@ -22,7 +22,7 @@ export default context => {
   // Add store to the context
   <%= (store ? 'context.store = store' : '') %>
   // Nuxt object
-  context.nuxt = { data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true }
+  context.nuxt = { layout: 'default', data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true }
   // create context.next for simulate next() of beforeEach() when wanted to redirect
   context.redirected = false
   context.next = function (opts) {
@@ -120,6 +120,8 @@ export default context => {
     return _app.loadLayout(layout).then(() => _app.setLayout(layout))
   })
   .then((layout) => {
+    // Set layout to __NUXT__
+    context.nuxt.layout = _app.layoutName
     // Call middleware (layout + pages)
     let midd = []
     if (layout.middleware) {
@@ -202,7 +204,16 @@ export default context => {
     context.nuxt.error = _app.$options._nuxt.err
     <%= (store ? '// Add the state from the vuex store' : '') %>
     <%= (store ? 'context.nuxt.state = store.state' : '') %>
-    return _app
+    // If no error, return main app
+    if (!context.nuxt.error) {
+      return _app
+    }
+    // Load layout for error page
+    let layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout)
+    context.nuxt.layout = layout || ''
+    return _app.loadLayout(layout)
+    .then(() => _app.setLayout(layout))
+    .then(() => _app)
   })
   .catch(function (error) {
     if (!componentsLoaded && error instanceof Error) {

lib/build.js

@@ -371,8 +371,8 @@ function getWebpackServerConfig () {
 
 function createWebpackMiddleware () {
   const clientConfig = getWebpackClientConfig.call(this)
-  const host = process.env.HOST || process.env.npm_package_config_nuxt_port || '127.0.0.1'
+  const host = process.env.HOST || process.env.npm_package_config_nuxt_host || '127.0.0.1'
-  const port = process.env.PORT || process.env.npm_package_config_nuxt_host || '3000'
+  const port = process.env.PORT || process.env.npm_package_config_nuxt_port || '3000'
   // setup on the fly compilation + hot-reload
   clientConfig.entry.app = _.flatten(['webpack-hot-middleware/client?reload=true', clientConfig.entry.app])
   clientConfig.plugins.push(

test/fixtures/with-config/layouts/error.vue

@@ -1,3 +1,9 @@
 <template>
   <h1>Error page</h1>
 </template>
+
+<script>
+export default {
+  layout: 'custom'
+}
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <p>Never displayed</p>
+</template>
+
+<script>
+export default {
+  fetch ({ error }) {
+    error({ message: 'Nuxt Error', statusCode: 300 })
+  }
+}
+</script>

test/fixtures/with-config/plugins/only-client.js

@@ -1 +1 @@
-console.log('Only called in client-side!')
+// Custom plugin (only included on client-side)

test/with-config.test.js

@@ -37,6 +37,7 @@ test('/ (custom build.publicPath)', async t => {
 test('/test/ (router base)', async t => {
   const window = await nuxt.renderAndGetWindow(url('/test/'))
   const html = window.document.body.innerHTML
+  t.is(window.__NUXT__.layout, 'default')
   t.true(html.includes('<h1>Default layout</h1>'))
   t.true(html.includes('<h1>I have custom configurations</h1>'))
 })
@@ -44,6 +45,7 @@ test('/test/ (router base)', async t => {
 test('/test/about (custom layout)', async t => {
   const window = await nuxt.renderAndGetWindow(url('/test/about'))
   const html = window.document.body.innerHTML
+  t.is(window.__NUXT__.layout, 'custom')
   t.true(html.includes('<h1>Custom layout</h1>'))
   t.true(html.includes('<h1>About page</h1>'))
 })
@@ -57,6 +59,14 @@ test('/test/env', async t => {
   t.true(html.includes('"string": "Nuxt.js"'))
 })
 
+test('/test/error', async t => {
+  const window = await nuxt.renderAndGetWindow(url('/test/error'))
+  const html = window.document.body.innerHTML
+  t.is(window.__NUXT__.layout, 'custom')
+  t.true(html.includes('<h1>Custom layout</h1>'))
+  t.true(html.includes('Error page'))
+})
+
 test('/test/user-agent', async t => {
   const window = await nuxt.renderAndGetWindow(url('/test/user-agent'))
   const html = window.document.body.innerHTML
@@ -72,7 +82,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, 19)
+  t.is(stats.assets.length, 21)
 })
 
 // Close server and ask nuxt to stop listening to file changes