Nuxt.js: Server Middleware, handling Aliases (404 redirection)

Created on 23 Nov 2017 · 9Comments · Source: nuxt/nuxt.js

Hi,
for some reasons I have to handle my vue-router aliases and some times return a 404 if some given conditions are not respected.
I see I can easily set res status to 404 like below:

module.exports = function (req, res, next) {
  // check incoming request and do some logic
  // ......................
  // then check if the condition is true and eventually redirect to 404
  if (aliasesLookup[req.path] && aliasesLookup[req.path] !== country) {
    res.status(404).send('Not found')
    return
  }
  next()
}

However, I would like also to set the nuxt.js 404 template, is there any way to achieve that? At the moment I just get a white page with the 404 error in console.

_{This question is available on Nuxt.js community (#c1944)}

question

Source

francescobm

All 9 comments

Use error page and error.statusCode to customize 404 error page.

// layouts/error.vue
<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error']
}
</script>

clarkdo on 23 Nov 2017

Thanks @clarkdo, unfortunately it doesn't seem to work like that.
I am using a server middleware in nuxt.config.js

// nuxt.config.js
serverMiddleware: [
   '~/routes/alias-handler'
]

// aliasHanlder.js
module.exports = function (req, res, next) {
  // check incoming request and do some logic
  // ......................
  // then check if the condition is true and eventually redirect to 404
  if (aliasesLookup[req.path] && aliasesLookup[req.path] !== country) {
    res.status(404).send('Not found')
    return
  }
  next()
}

I correctly get the 404 on the Front End but I can't seem to get any template associated to it, not even the standard nuxt.js error template.

francescobm on 23 Nov 2017

Try below together with layout/error.vue

module.exports = function (req, res, next) {
  // check incoming request and do some logic
  // ......................
  // then check if the condition is true and eventually redirect to 404
  if (aliasesLookup[req.path] && aliasesLookup[req.path] !== country) {
      next({ statusCode: 404, message: 'not found'})
  } else {
      next()
  }
}

clarkdo on 23 Nov 2017

Sorry for the late reply, still not working, I will investigate and I'll update this thread if I find any solution, thanks for your help

francescobm on 27 Nov 2017

Pls check: https://github.com/clarkdo/nuxt-issues/tree/issue_2204

Visit: http://localhost:3000/test404

clarkdo on 27 Nov 2017

Have we considered using validate() within the pages?

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}
If the validate method does not return true, Nuxt.js will automatically load the 404 error page.