allow setting headers or returning a redirect from error.vue

[KoenCa]

Environment

• Nuxi 3.0.0-rc.9
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.9
• Nitro Version: 0.5.1
• Builder: vite

Reproduction

Simple reproduction on Stackblitz: https://stackblitz.com/edit/github-2ty5wn?file=error.vue

How it is setup now is using await navigateTo which shows a 404 page that doesn't represent error.vue. I expect it to navigate away. When I use return navigateTo then I get a 500 page that says: Vite Error, but don't see an error anywhere.

Describe the bug

It seems like using navigateTo in error.vue doesn't work for navigating the user away. I want to use this so that I can redirect a user when there is a 404 and a specific URL is being requested (redirects can be specified in a CMS). When I take a look at the docs this is supposed to work? https://v3.nuxtjs.org/api/utils/navigate-to#navigating-within-a-vue-component.

Additional context

At the moment I can make it work if I put the call to navigateTo in the onMounted function, but this doesn't seem the right approach to me as I want to redirect as soon as possible on the server. Now you see a small flash of the 404 page before the redirection happens.

I also tried the following in an error.ts file in the plugins folder:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("app:error", async (error) => {
    if (error.statusCode !== 404) return;
    const url = nuxtApp._route.path;

    if (url === "/en/testHook") {
      clearError();
      await navigateTo("/en/about");
    }
  });
});

That makes the URL change in the browser, but the app stays on the error page of error.vue.

Logs

No response

[aesyondu]

Hi, how about using a catch-all page? That way if no page matches it will render this page, not the error.vue

https://v3.nuxtjs.org/guide/directory-structure/pages/#catch-all-route

[danielroe]

Currently this is not supported in the error page - only a HTML response is allowed. But I think it's worth considering this ability.