API: The validate Method

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. }