fix(vue-app): error page layout not correctly applied in client rendering (nuxt#6479)

clarkdo · pi0 · commit 578d5d41f430 · 2019-09-30T10:44:35.000+02:00
diff --git a/packages/vue-app/template/App.js b/packages/vue-app/template/App.js
@@ -6,6 +6,7 @@ import {
   globalHandleError
 } from './utils'
 <% } %>
+<% if (features.layouts && components.ErrorPage) { %>import NuxtError from '<%= components.ErrorPage %>'<% } %>
 <% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./components/nuxt-loading.vue") %>'<% } %>
 <% if (buildIndicator) { %>import NuxtBuildIndicator from './components/nuxt-build-indicator'<% } %>
 <% css.forEach((c) => { %>
@@ -35,6 +36,15 @@ export default {
   render (h, props) {
     <% if (loading) { %>const loadingEl = h('NuxtLoading', { ref: 'loading' })<% } %>
     <% if (features.layouts) { %>
+    <% if (components.ErrorPage) { %>
+    if (this.nuxt.err && NuxtError.layout) {
+      this.setLayout(
+        typeof NuxtError.layout === 'function'
+          ? NuxtError.layout(this.context)
+          : NuxtError.layout
+      )
+    }
+    <% } %>
     const layoutEl = h(this.layout || 'nuxt')
     const templateEl = h('div', {
       domProps: {
diff --git a/test/e2e/error.test.js b/test/e2e/error.test.js
@@ -32,6 +32,7 @@ describe('basic browser', () => {
   test('/squared doesnt loop due to error on error page', async () => {
     await page.nuxt.navigate('/squared')
 
+    expect(await page.$text('header')).toBe('Error layout')
     expect(await page.$text('h2')).toBe('An error occured while showing the error page')
   })
 
diff --git a/test/fixtures/error/layouts/error-layout.vue b/test/fixtures/error/layouts/error-layout.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <header>Error layout</header>
+    <nuxt />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorLayout'
+}
+</script>
diff --git a/test/fixtures/error/layouts/error.vue b/test/fixtures/error/layouts/error.vue
@@ -11,6 +11,7 @@
 
 <script>
 export default {
+  layout: 'error-layout',
   // eslint-disable-next-line vue/require-prop-types
   props: ['error']
 }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`
`12`	`12`	`<script>`
`13`	`13`	`export default {`
	`14`	`+ layout: 'error-layout',`
`14`	`15`	`// eslint-disable-next-line vue/require-prop-types`
`15`	`16`	`props: ['error']`
`16`	`17`	`}`