Nuxt 3 Release Candidate is out! Discover more about it on v3.nuxtjs.org

Page traduite Le contenu de cette page peut être déprécié.

La méthode validate

Nuxt vous permet de définir une méthode de validation à l'intérieur de votre composant de routes dynamiques.


  • Type: Function ou Async Function

validate est appelé avant chaque navigation sur une nouvelle route. Il sera appelé une fois côté serveur: lors de la première requête à l'application Nuxt et côté client: lors de la navigation sur d'autres routes . Cette méthode prend l'objet context en tant qu'argument.

validate({ params, query, store }) {
  return true // si les paramètres sont valides
  return false // ceci va arrêter Nuxt dans son render de la route et afficher la page d'erreur
}
async validate({ params, query, store }) {
  // opérations asynchrone à attendre
  return true // si les paramètres sont valides
  return false // ceci va arrêter Nuxt dans son render de la route et afficher la page d'erreur
}

On peut aussi renvoyer des promesses:

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

Nuxt vous permet de définir une méthode de validation à l'intérieur de votre composant de routes dynamiques (dans notre exemple: pages/users/_id.vue).

Si la méthode de validation ne retourne pas true, Nuxt va automatiquement charger la page d'erreur 404.

export default {
  validate({ params }) {
    // Doit être un nombre
    return /^\d+$/.test(params.id)
  }
}

On peut aussi vérifier de la data dans notre store (remplie par exemple par nuxtServerInit avant l'action):

export default {
  validate({ params, store }) {
    // On vérifie si `params.id` est une catégorie existante
    return store.state.categories.some(category => category.id === params.id)
  }
}

On peut aussi renvoyer des erreurs attendues (ou pas) durant l'exécution de la fonction de validation:

export default {
  async validate({ params, store }) {
    // Renvoie une erreur interne serveur 500 avec un message personnalisé
    throw new Error('En cours de construction !')
  }
}
Editer cette page sur GitHub Mise à jour le sam. 24 septembre 2022