You are ready Nuxt 2 docs. Head over v3.nuxtjs.org for Nuxt 3 docs.
Page traduite Le contenu de cette page peut être déprécié.
Lire la page originale Contribuer à cette traduction

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 jeu. 9 février 2023
Paiva Paiva Florian Reuschel Florian Reuschel Sébastien Chopin Sébastien Chopin Daniel Roe Daniel Roe Rishi Raj Jain Rishi Raj Jain Clément Ollivier Clément Ollivier Savas Vedova Savas Vedova Steven Soekha Steven Soekha Vinícius Alves Vinícius Alves Kareem Dabbeet Kareem Dabbeet Valentín Costa Valentín Costa Ryan Skinner Ryan Skinner Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Recoaro Lucas Recoaro Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Eltociear Ashimine Ikko Eltociear Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti