How to redirect from /pages to layouts/error.vue?

Question

I have created a error.vue file within the layouts folder which should show the UI for a 400, 404, 410 and 500 error. But, it is not showing the ones I created, it is still showing the default NuxtServerError page.

So, my question is how can I show my created UI within a page.

Below is the code that I am using within the layouts/error.vue

HTML:

<template>
  <div class="error-container">
    <div class="error-content" v-if="error.statusCode === 404">
      <div>
        <h1>Sorry, the page you were looking for doesn't exist.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:[email protected]">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 400">
      <div>
        <h1>Sorry, the page you are looking for doesn't exist anymore.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:[email protected]">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 410">
      <div>
        <h1>Sorry, the page you are looking for has been deleted.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:[email protected]">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 500">
      <div>
        <h1>Sorry, the page you were looking for doesn't exist.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:[email protected]">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>
  </div>  
</template>

Javascript:

<script>
export default {
  head() {
    return {
      title: 'Lost?'
    }
  },
  props: ['error'],
  layout: 'error'
}
</script>

CSS:

<style scoped>
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.error-content {
  width: 90%;
  max-width: 800px;
  margin: auto;
  display: grid;
  grid-template: auto / auto 200px;
  grid-column-gap: 10px;
  text-align: center;
}

.error-content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.error-content > div > h1 {
  font-size: 30px;
  margin: 0;
}

.error-content > img {
  width: 200px;
}

a {
  text-decoration: unset;
  color: var(--color-tpBlue);
}
</style>

Many thanks in advance!

Answer 1

Redirect to error layout does not happen automatically. Instead, redirect should be done in relevant hooks or methods of your application. It is done by calling error method available in Nuxt context with statusCode and message props passed, which will replace page with with content of layout/error.vue and will respond with HTTP status provided as a statusCode prop.

Here is an example of handling errors inside asyncData:

export default {
  async asyncData ({ params, error }) {
    try {
      const { data } = await axios.get(`https://my-api/posts/${params.id}`)
      return { title: data.title }
    } catch (e) {
       error({ statusCode: 404, message: 'Post not found' })
    }
  }
}