From 9a2767ac908b149461482bb967aba920f0e5d050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Mon, 20 Feb 2017 22:11:34 +0000
Subject: [PATCH] Layout on afterEach

---
 TODO.md                     |  6 ++++--
 lib/app/App.vue             | 15 ++++++++-------
 lib/app/client.js           | 22 +++++++++++++++-------
 lib/app/components/nuxt.vue |  2 +-
 lib/app/index.js            |  3 ++-
 lib/app/server.js           |  4 ++--
 lib/build.js                |  2 +-
 7 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/TODO.md b/TODO.md
index 4444fdf470..e83d88f9fa 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,8 @@
 Tasks for `0.9.10`:
-- [ ] `build.publicPath` #25
+- [x] `build.publicPath` #25
 - [ ] Use [name].[chunkhash].js for generated js (production) #218
 - [ ] Add expired headers (production)
-- [ ] Activate layout only on afterEach #214
+- [x] Activate layout only on afterEach #214
 - [ ] Custom layout in layouts/error.vue #172
+
+-> Not possible to have custom layout for a page, it should do the condition inside the layout itself (because of the middleware strategy)
diff --git a/lib/app/App.vue b/lib/app/App.vue
index 6821f73894..080aa3a689 100644
--- a/lib/app/App.vue
+++ b/lib/app/App.vue
@@ -33,18 +33,19 @@ export default {
       if (!layout || !layouts['_' + layout]) layout = 'default'
       this.layoutName = layout
       let _layout = '_' + layout
-      if (typeof layouts[_layout] === 'function') {
-        return this.loadLayout(_layout)
-      }
       this.layout = layouts[_layout]
-      return Promise.resolve(this.layout)
+      return this.layout
     },
-    loadLayout (_layout) {
+    loadLayout (layout) {
+      if (!layout || !layouts['_' + layout]) layout = 'default'
+      let _layout = '_' + layout
+      if (typeof layouts[_layout] !== 'function') {
+        return Promise.resolve(layouts[_layout])
+      }
       return layouts[_layout]()
       .then((Component) => {
         layouts[_layout] = Component
-        this.layout = layouts[_layout]
-        return this.layout
+        return layouts[_layout]
       })
       .catch((e) => {
         if (this.$nuxt) {
diff --git a/lib/app/client.js b/lib/app/client.js
index 21e189e631..8a3a1a739b 100644
--- a/lib/app/client.js
+++ b/lib/app/client.js
@@ -2,7 +2,7 @@
 
 import Vue from 'vue'
 import middleware from './middleware'
-import { app, router<%= (store ? ', store' : '') %> } from './index'
+import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
 import { getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, promiseSeries, promisify, getLocation, compile } from './utils'
 const noopData = () => { return {} }
 const noopFetch = () => {}
@@ -88,7 +88,7 @@ function render (to, from, next) {
   this._hadError = !!this.$options._nuxt.err
   if (!Components.length) {
     // Default layout
-    this.setLayout()
+    this.loadLayout(NuxtError.layout)
     .then(callMiddleware.bind(this, Components, context))
     .then(() => {
       this.error({ statusCode: 404, message: 'This page could not be found.' })
@@ -117,7 +117,7 @@ function render (to, from, next) {
   this.setTransitions(mapTransitions(Components, to, from))
   let nextCalled = false
   // Set layout
-  this.setLayout(Components[0].options.layout)
+  this.loadLayout(Components[0].options.layout)
   .then(callMiddleware.bind(this, Components, context))
   .then(() => {
     // Pass validation?
@@ -175,8 +175,11 @@ function render (to, from, next) {
   .catch((error) => {
     _lastPaths = []
     error.statusCode = error.statusCode || error.status || (error.response && error.response.status) || 500
-    this.error(error)
-    next(false)
+    this.loadLayout(NuxtError.layout)
+    .then(() => {
+      this.error(error)
+      next(false)
+    })
   })
 }
 
@@ -213,6 +216,8 @@ function fixPrepatch (to, ___) {
     if (this._hadError && this._dateLastError === this.$options._nuxt.dateErr) {
       this.error()
     }
+    // Set layout
+    this.setLayout(this.$options._nuxt.err ? NuxtError.layout : to.matched[0].components.default.options.layout)
     // hot reloading
     hotReloadAPI(this)
   })
@@ -234,8 +239,9 @@ function hotReloadAPI (_app) {
     let promises = []
     // If layout changed
     if (_app.layoutName !== Component.options.layout) {
-      let promise = _app.setLayout(Component.options.layout)
+      let promise = _app.loadLayout(Component.options.layout)
       promise.then(() => {
+        _app.setLayout(Component.options.layout)
         hotReloadAPI(_app)
       })
       promises.push(promise)
@@ -338,8 +344,10 @@ Promise.all(resolveComponents)
 .then((Components) => {
   const _app = new Vue(app)
 
-  return _app.setLayout(Components.length ? Components[0].options.layout : '')
+  let layout = Components.length ? Components[0].options.layout : NuxtError.layout
+  return _app.loadLayout(layout)
   .then(() => {
+    _app.setLayout(layout)
     return { _app, Components }
   })
 })
diff --git a/lib/app/components/nuxt.vue b/lib/app/components/nuxt.vue
index be1682f050..b6eb339a31 100644
--- a/lib/app/components/nuxt.vue
+++ b/lib/app/components/nuxt.vue
@@ -6,7 +6,7 @@
 <script>
 import Vue from 'vue'
 import NuxtChild from './nuxt-child'
-import NuxtError from '<%= components.ErrorPage %>'
+import NuxtError from '<%= components.ErrorPage ? components.ErrorPage : "./nuxt-error.vue" %>'
 
 export default {
   name: 'nuxt',
diff --git a/lib/app/index.js b/lib/app/index.js
index 78ca5f2cce..6a1dcef786 100644
--- a/lib/app/index.js
+++ b/lib/app/index.js
@@ -6,6 +6,7 @@ import router from './router.js'
 <% if (store) { %>import store from './store.js'<% } %>
 import NuxtChild from './components/nuxt-child.js'
 import NuxtLink from './components/nuxt-link.js'
+import NuxtError from '<%= components.ErrorPage ? components.ErrorPage : "./components/nuxt-error.vue" %>'
 import Nuxt from './components/nuxt.vue'
 import App from '<%= appPath %>'
 
@@ -85,4 +86,4 @@ const app = {
   ...App
 }
 
-export { app, router<%= (store ? ', store' : '') %> }
+export { app, router<%= (store ? ', store' : '') %>, NuxtError }
diff --git a/lib/app/server.js b/lib/app/server.js
index 461991b2e6..a4977a9dc4 100644
--- a/lib/app/server.js
+++ b/lib/app/server.js
@@ -6,7 +6,7 @@ import Vue from 'vue'
 import { stringify } from 'querystring'
 import { omit } from 'lodash'
 import middleware from './middleware'
-import { app, router<%= (store ? ', store' : '') %> } from './index'
+import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
 import { getMatchedComponents, getContext, promiseSeries, promisify, urlJoin } from './utils'
 
 const isDev = <%= isDev %>
@@ -72,7 +72,7 @@ export default context => {
       return Component
     })
     // Set layout
-    return _app.setLayout(Components.length ? Components[0].options.layout : '')
+    return _app.setLayout(Components.length ? Components[0].options.layout : NuxtError.layout)
   })
   .then((layout) => {
     // Call middleware
diff --git a/lib/build.js b/lib/build.js
index f1a4d33cb0..74f86bc6e7 100644
--- a/lib/build.js
+++ b/lib/build.js
@@ -206,7 +206,7 @@ function * generateRoutesAndFiles () {
     loading: (typeof this.options.loading === 'string' ? r(this.srcDir, this.options.loading) : this.options.loading),
     transition: this.options.transition,
     components: {
-      ErrorPage: './nuxt-error.vue'
+      ErrorPage: null
     }
   }
   // Format routes for the lib/app/router.js template