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

user_9812848 0
Viewed 6947

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:contact@web.co">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:contact@web.co">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:contact@web.co">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:contact@web.co">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!

nuxt.js vue.js javascript
2 Answers

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

As a complement to @aBiscuit answer:

For the ones who want to redirect to the error page in another context than asyncData in your component, you can access the error function in this.$nuxt.error.

user_91806190
Related