How to render error page from fetch hook?

[kingRayhan]

I can render an error page from asyncData's error function like this,

export default {
  asyncData({ error }) {
    try {
      // TODO: http call
    } catch (e) {
      error({
        statusCode: e.response.statusCode,
        message: e.response.message,
      })
    }
  },
}

Now I want to know, if I want to render error page from fetch life-cycle hook then how can I render nuxt error page?

export default {
  fetch(){
    try {
      // TODO: http call
    } catch (e) {
      
      this.$error({
        statusCode: e.response.statusCode,
        message: e.response.message,
      })


    }
  }
}

[clemcode]

Hi,

Error handling in the fetch() hook occurs at component level, which means you can't directly render the error page as you would using asyncData().

fetch() provides a $fetchState object that you can use in your template to handle pending and error cases like so :

<div>
    <p v-if="$fetchState.pending">Fetching posts...</p>
    <p v-else-if="$fetchState.error">Error while fetching posts</p>
    <ul v-else>
      …
    </ul>
</div>

Take a look at this post for the details : https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/#error-handling