Nuxt.js lets you define a validator method inside your dynamic route component.

    • Type: Function or Async Function

    validate is called every time before navigating to a new route. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method takes the context object as an argument.

    1. validate({ params, query, store }) {
    2.   return true // if the params are valid
    3.   return false // will stop Nuxt.js to render the route and display the error page
    4. }
    1. async validate({ params, query, store }) {
    2.   // await operations
    3.   return true // if the params are valid
    4.   return false // will stop Nuxt.js to render the route and display the error page
    5. }

    You can also return promises:

    1. validate({ params, query, store }) {
    2.   return new Promise((resolve) => setTimeout(() => resolve()))
    3. }

    Nuxt.js lets you define a validator method inside your dynamic route component (In this example: pages/users/_id.vue).

    If the validate method does not return true, Nuxt.js will automatically load the 404 error page.

    1. export default {
    2.   validate({ params }) {
    3.     // Must be a number
    4.     return /^\d+$/.test(params.id)
    5.   }
    6. }

    You can also check some data in your store for example (filled by nuxtServerInit before action):

    1. export default {
    2.   validate({ params, store }) {
    3.     // Check if `params.id` is an existing category
    4.     return store.state.categories.some(category => category.id === params.id)
    5.   }
    6. }

    You can also throw expected or unexpected errors during validate function execution:

    1. export default {
    2.   async validate({ params, store }) {
    3.     // Throws a 500 internal server error with custom message
    4.     throw new Error('Under Construction!')
    5.   }
    6. }