Nuxt.js: Custom Server error page

[hackuun]

If I kill my API server, then my app shows this error page

I made an error.vue layout, but it doesn't work in case of such issue

<template>
  <section class="viewport content">
          <h1 v-if="error.statusCode === 404">404</h1>
          <h1 v-else>An error occured</h1>
  </section>
</template>

<script>
export default {
  props: ['error'],
  transition: 'page'
}
</script>

My console is showing this

[Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined"

So this layout page component trick doesn't catch such errors? Then how to handle it?

_{This question is available on Nuxt.js community (#c1880)}

[pi0]

Hi. For overriding SSR/Fatal errors, you need to provide an extra static HTML template. Simply create app/views/error.html file in root of your project and it will be changed.

[hackuun]

@pi0 hi, thanks for response. I am not sure I get you right: I need to create app/views folder and then error.html file? Or just an error.html next to nuxt.config?

[pi0]

I need to create app/views folder and then error.html file?

Yes. Generally to override every template file we can simply place it inside app directory :)

[hackuun]

Cool, thanks, it is working.
Can I read about this in Docs or it's not documented?

[manniL]

A guide can be found here (shameless plug)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.