Nuxt 404 error page should redirect to homepage

Question

I am looking for a way to always redirect to homepage when a page doesn't exist using Nuxt.Js.

Our sitemap generation had some problems a few days back and we submitted wrong urls that do not exist. Google Search Console shows a big number of 404 and we want to fix them with 301 redirect to homepage.

I tried this

created() {
    this.$router.push(
      this.localePath({
        name: 'index',
        query: {
          e: 'er'
        }
      })
    )
  }

and although the page redirects to homepage successfully I think Google will have problems with this since the pages initially renders with 404.

I also tried this

  async asyncData({ redirect }) {
    return redirect(301, '/el?e=rnf')
  },

but didn't work (same with fetch)

Any ideas on a solution to this?

Answer 1

You are able to create a default 404-page in nuxt - just put a file with a name _.vue in your ~/pages/ dir. This is your 404-page :)

or you can use another method to create such page: https://github.com/nuxt/nuxt.js/issues/1614 but I have not tried it

Then add a simple 404-redirect-middleware to this page:

// !!! not tested this code !!!
middleware: [
  function({ redirect }) {
    return redirect(301, '/el?e=rnf')
  },
],