Static GitHub Issues

[1566] Layout on error.vue does not seem to work

prev: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside, or missing . Bailing hydration and performing full client-side render.
next: custom layout don't work

Hi here,

I try to customise my error page, i have read this doc https://nuxtjs.org/guide/views#error-page. The error.vue works well but i encounter a problem with the layout property.

Versions

❯ npm -v
5.3.0

❯ node -v
v7.4.0

"nuxt": "^1.0.0-rc8"

Steps to reproduce

Create a new project with the starter kit

vue init nuxt/starter error-layout

Create layouts

In the layouts directory, create two files:

error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // you can set a custom layout for the error page
}
</script>

blog.vue

<template>
  <div>
    <div>My blog navigation bar here</div>
    <nuxt/>
  </div>
</template>

Start the application

Run:

npm run dev

Test the result

Open a browser and go to http://localhost:3000/unknow-page

image

Expected result

The text My blog navigation bar here should be visible in the rendered content, right? Tell me if i am wrong or if something is missing in my code

Thank you for your work 👍

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1398">#c1398</a>)</em></sub></div>