How to navigate to error page from Nuxt store

user_16291122 0
Viewed 330
export const state = () => ({
  data: {}
})

export const getters = {
  data: state => state.data
}

export const actions = {
  getData ({ commit }) {
    this.$axios('https://jsonplaceholder.typicode.com/todosx/1')
      .then((response) => {
        commit('SET_DATA', response.data)
      })
      .catch((err) => {
          // Navigate to error page
      })
  }
}

export const mutations = {
  SET_DATA (state, data) {
    state.data = data
  }
}

After catching error in the catch for the axios would like to navigate to the error page from the Nuxt store. What will be the best way to achieve this?

axios nuxt.js vuex vue.js
2 Answers

In your catch you can redirect the user to the error page by

return this.$nuxt.error({ statusCode: 404, message: 'Your error message' })

and in your error.vue page you can access it with error prop like:

<h1>{{ error.statusCode }}</h1>
<h2>{{ error.message }} </h2>
user_167854850

This kind of template should work fine on top of $nuxt.error

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

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

As shown in the documentation: https://nuxtjs.org/docs/2.x/directory-structure/layouts#error-page

user_88165850
Related