Nuxt.js: Middleware doesn't run at all in "layouts/error.vue" page

[sam3d]

Version

v2.3.4

Steps to reproduce

1. Create a simple Nuxt app with only an index.vue page
2. Set the nuxt.config.js mode to spa (so the middleware can only get called on the client)
3. Create a layouts/error.vue page with the following content:

<template></template>

<script>
export default {
  middleware() {
    console.log("Called!");
  }
};
</script>

1. Navigate to _any_ page that isn't "/"

What is expected ?

"Called!" will log to the browser console

What is actually happening?

Nothing gets logged to the browser console

_{This bug report is available on Nuxt community (#c8455)}

[sam3d]

Also, if this is expected behaviour, please could this potentially be changed? There are many use cases for wanting to apply middleware on the error page. Just one example I can think of is redirecting away from the page in the case of any error (without having to put it in the created hook):

<template></template>

<script>
export default {
  middleware({ redirect }) {
    redirect("/");
  }
};
</script>

[angus96]

where did you apply this error layout?

[sam3d]

@angus96 I'm not applying it anywhere. In nuxt, the error page is not meant to be applied.

https://nuxtjs.org/guide/views/#error-page

The error page is a page component which is always displayed when an error occurs (that does not happen while server-side rendering). Warning: Though this file is placed in the layouts folder, it should be treated as a page. You can customize the error page by adding a layouts/error.vue file.

[sam3d]

This issue remains unresolved on my end.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[sam3d]

Not stale, and the reproduction steps are noted in the original issue. This still occurs in the latest version.

[sam3d]

This issue is still occurring the latest version of Nuxt.js

[ParallelUniv3rse]

Bumped into the same issue, would be nice if middleware or asyncData worked.

[konsvasi]

I'm running into the same issue. No middleware runs on 'layouts/error.vue'

[ParallelUniv3rse]

Bumping into this issue months later still. For the ones struggling - Last time around I've overcome the issue by:
1) Creating a catch all route with custom middleware meta:

  {
      path: '*',
      meta: {
        middleware: myMiddlewareFunc,
      },
    },

2) Rergistered a beforeEach hook on the router:

router.beforeEach((to, from, next) => {
    if (to.meta.middleware) {
      const middleware = [].concat(to.meta.middleware);

      // mock a fake context because the real one is not available
      const context = {
        from,
        redirect: (statusCode, url) => next(url),
        router,
        route: to,
        error: () => next(),
      };

      // support only single middleware function for now.
      return middleware[0](context);
    } else {
      next();
    }
  });

3) Used myMiddlewareFunc as normal (middleware/myMiddlewareFunc.js)

export default function ({ route, redirect, error }, message) {
  // do whatever
}

I haven't really given a thought to how this might work if you're using the built-in router based on filesystem and not an external one. This was enough to intercept the error render, redirect if there was a redirect defined for the url in the cms or fall through to the error page otherwise.

[justinwride]

I am also having this issue on the latest version. Neither middleware nor asyncData run in my file layouts/error.vue.
I would like to redirect depending on the error status code, and currently the only way I can figure out how is by using beforeMount() or mounted().

[ndemasie]

Confirming this remains an issue in v2.14.6. Luckily I'm just adding some light custom tracking so was able to get away with using the beforeMount hook.

  beforeMount() {
    this.$trackEvent(`${this.error.statusCode} displayed`)
  }