diff --git a/packages/vue-app/template/App.js b/packages/vue-app/template/App.js
index f3ca316ad3..9b6a300f1d 100644
--- 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
index d997398c57..e9f31c6ea5 100644
--- 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
new file mode 100644
index 0000000000..91cee17bd5
--- /dev/null
+++ b/test/fixtures/error/layouts/error-layout.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/test/fixtures/error/layouts/error.vue b/test/fixtures/error/layouts/error.vue
index f024b262a9..b9441b040e 100644
--- a/test/fixtures/error/layouts/error.vue
+++ b/test/fixtures/error/layouts/error.vue
@@ -11,6 +11,7 @@