CODEWITHSUNDEEP
vue.jsnuxt.js
yam
yam

Reputation: 1463

How do I disable nuxt default error redirection

Set up a nuxt project with Vuetify. One of the pages uses a client-only (no-ssr) component. During development, in case of an error in this component, I get redirected to the default error page, which prevents me from inspecting the variables and components using Vue devtools.

I feel like it should be really simple but I couldn't find a way to disable this auto redirecting behavior. So I guess my question is how do you disable nuxt default error redirection?

Upvotes: 11

Views: 6616

Answers (3)

Денис Куров
Денис Куров

Reputation: 11

You can use global handler like this

Vue.config.errorHandler = (error) => {
   ErrorService.onError(error);
   return true
}

You can look into .nuxt/client.js Block where they are defining Vue error handler.

const defaultErrorHandler = Vue.config.errorHandler
  Vue.config.errorHandler = async (err, vm, info, ...rest) => {
    // Call other handler if exist
    let handled = null
    if (typeof defaultErrorHandler === 'function') {
      handled = defaultErrorHandler(err, vm, info, ...rest)
    }
    if (handled === true) {
      return handled
    }

 ...some code to define layout

Upvotes: 1

vqoph
vqoph

Reputation: 106

I found a hack with a nuxt plugin :

./plugins/errors.js

export default function({ app }) {
  app.nuxt.error = () => {}
}

./nuxt.config.js

module.exports = {
  ...
  plugins: [
    "~/plugins/errors.js",
  ],
}

Upvotes: 6

Nicolas Pennec
Nicolas Pennec

Reputation: 7631

You cannot disable the <nuxt-error> rendering from the nuxt configuration.

Another way is to hack the nuxt render as follows:

1/ open the file ./node_modules/@nuxt/vue-app/template/components/nuxt.js
2/ go to the render(h) method
3/ remove the error condition to always show the component:

  render (h) {

    // HACK TO SKIP ERROR
    this.nuxt.err = false

    // if there is no error
    if (!this.nuxt.err) {
      // Directly return nuxt child
      return h('NuxtChild', {
        key: this.routerViewKey,
        props: this.$props
      })
    }

    // ...
  }

nb: after each npm or yarn install the hack in the file above will be overwrite.

Upvotes: 2

Related Questions