CODEWITHSUNDEEP
vue.jsaxiosnuxt.jsvuex
cherakkal_a
cherakkal_a

Reputation: 47

How to navigate to error page from Nuxt store

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?

Upvotes: 4

Views: 1292

Answers (2)

Dmytro
Dmytro

Reputation: 656

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>

Upvotes: 4

kissu
kissu

Reputation: 46676

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

Upvotes: 1

Related Questions