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

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: {

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')
   })
 

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>

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']
 }