Nuxt Form : Simplifiez la gestion de vos formulaires

Share
Lire cet article en Anglais

La gestion des formulaires peut souvent devenir complexe dans les applications modernes. Avec Nuxt Form, vous simplifiez tout le processus, de la soumission à la validation des données, en passant par la gestion des erreurs, tout en restant entièrement réactif grâce à Nuxt.

Sommaire

Introduction

Récemment, j'ai publié un module Nuxt, mon tout premier module public, et je suis plutôt content de pouvoir le partager avec la communauté. Ce composable ajoute des fonctionnalités que l'on peut retrouver avec Inertia/Vue, mais en utilisant Nuxt.

Pour ceux qui ne connaîtraient pas Inertia, c'est un package que j'ai découvert en même temps que Laravel. Inertia permet de simplifier la communication entre le front-end et le back-end, notamment grâce à ses composables qui facilitent la gestion des formulaires.

Un composable en particulier m'a inspiré pour créer ce module useForm(). Ce dernier permet de créer des formulaires avec des données réactives, une gestion des erreurs, des transformations de données, des messages de succès, etc.

J'ai donc décidé de transposer l'expérience développeur (DX) offerte par useForm d'Inertia sur Nuxt. Mon objectif est de rendre la gestion des formulaires aussi fluide et intuitive dans l'écosystème Nuxt, tout en s'inspirant des meilleures pratiques qu'offre Inertia.

Gérer vos formulaires efficacement avec le composable useForm dans Nuxt

La fonction principale disponible dans Nuxt Form est useForm. Elle te permet de créer un formulaire réactif et de gérer son état. Voici comment tu peux l’utiliser :

const form = useForm({
  email: '',
  password: '',
})

Ce useForm initialise les champs du formulaire (email et password dans cet exemple) avec des valeurs par défaut. Il génère également un ensemble d'outils pour interagir avec ton formulaire de manière fluide et réactive.

Soumission de formulaires dans Nuxt avec post, put, delete

Une des grandes forces de Nuxt Form est la possibilité d'envoyer des données facilement grâce aux méthodes post, put, patch et delete. Ces méthodes te permettent de faire des appels API tout en gérant automatiquement l’état du formulaire. Par exemple, pour soumettre des données :

form.post('/api/endpoint', {
  onSuccess: (res) => {
    console.log('Success:', res);
    form.reset(); // Réinitialise le formulaire
  },
  onError: (err) => {
    console.warn('Erreur:', err);
  },
});

Transformer les données avec transform

La méthode transform te permet de manipuler les données avant de les envoyer. C’est utile si tu veux formater ou valider les données (par exemple, supprimer les espaces superflus ou normaliser le format des emails).

form.transform((data) => {
  return {
    email: data.email.trim().toLowerCase(),
    password: data.password.trim(),
  }
  }).post('/api/endpoint', {
  onSuccess: (res) => {
    console.log('Data soumise avec succès', res);
  },
  onError: (err) => {
    console.error('Erreur lors de la soumission', err);
  },
});

Dans cet exemple, les données du formulaire sont transformées avant d'être envoyées, garantissant qu'elles soient dans le bon format.

Gérer les erreurs avec form.errors

Afficher les erreurs côté client

Nuxt Form fournit une gestion simple et réactive des erreurs. Le composable form.errors te permet de gérer et d'afficher facilement les erreurs spécifiques à chaque champ du formulaire.

<template>
  <input v-model="form.email" type="text" placeholder="Enter your email" />
  <p v-if="form.errors.email">{{ form.errors.email }}</p>
</template>

Lorsque des erreurs surviennent (par exemple, des validations côté serveur), elles sont automatiquement affectées à form.errors, et tu peux les afficher directement dans ton template.

Gérer la validation avec Nitro

Avec Nitro et Nuxt Form, la gestion de la validation des formulaires est simple et efficace. Voici comment cela fonctionne :

import { createUserValidator } from '../validators'

export default defineEventHandler(async (event) => {
  const result = await readValidatedBody(event, createUserValidator.safeParse)
  if (!result.success) {
    return createValidationError(result.error)
  }
  // Enregistrer les données dans la base...
  return { statusCode: 201, message: 'success' }
})

L'approche consiste à lire le corps de la requête avec readValidatedBody. Si la validation échoue, on renvoie les erreurs via createValidationError, qui génère une réponse HTTP avec le statut 421 - Mauvaise Entité. Ces erreurs sont ensuite dispatchées dans form.errors, ce qui vous permet de les afficher facilement dans votre interface utilisateur.

Cette méthode garantit une validation robuste côté serveur, essentielle pour sécuriser vos formulaires dans une application Nuxt. De plus, elle s'intègre parfaitement avec la gestion réactive des erreurs côté client, offrant une expérience utilisateur fluide tout en maintenant une sécurité optimale.

Réinitialiser le formulaire avec reset

Tout cela fonctionne parfaitement quand la validation passe, mais qu'en est-il lorsque des erreurs surviennent ? Lorsqu'une erreur est détectée, il est essentiel de pouvoir réagir rapidement et réinitialiser le formulaire ou certaines parties de celui-ci. C'est là qu'intervient form.reset, un outil puissant pour remettre votre formulaire à zéro, ou simplement pour effacer les champs qui posent problème. Tu peux réinitialiser l'intégralité du formulaire, ou un champ spécifiques :

form.reset(); // Réinitialise tous les champs
form.reset('password'); // Réinitialise uniquement le champ "password"

Gérer le succès et les erreurs avec onSuccess et onError dans Nuxt Form

Lors de la soumission d’un formulaire, il est crucial de savoir si l'opération a été réussie ou si des erreurs sont survenues. Avec Nuxt Form, vous pouvez gérer ces événements grâce aux méthodes de rappel (callbacks) comme onSuccess, onError, et onFinish, qui vous offrent une maîtrise complète sur le flux de soumission des formulaires.

Utilisation de onSuccess : Gérez les soumissions réussies

La méthode onSuccess est déclenchée lorsque la soumission du formulaire se termine avec succès. Cela vous permet d'effectuer des actions supplémentaires, comme réinitialiser le formulaire ou afficher un message de confirmation à l'utilisateur.

form.post('/api/endpoint', {
  onSuccess: (response) => {
    console.log('Soumission réussie:', response);
    // Réinitialiser le formulaire après une soumission réussie
    form.reset();
  }
});

Dans cet exemple, après avoir envoyé les données via POST, onSuccess est utilisé pour réinitialiser le formulaire grâce à form.reset(), offrant ainsi une expérience fluide à l'utilisateur.

Cela est particulièrement utile après une soumission réussie ou si tu veux permettre à l'utilisateur de recommencer avec des valeurs vierges.

Utilisation de onError : Gérez les erreurs de soumission

Lorsque la soumission échoue, la méthode onError entre en jeu. Elle capture les erreurs retournées par le serveur, ce qui vous permet de les afficher à l'utilisateur et de prendre des mesures correctives, comme réinitialiser uniquement les erreurs du formulaire.

form.post('/api/endpoint', {
  onError: (error) => {
    console.error('Erreur lors de la soumission:', error);
    form.reset("password")
  }
});

Avec onError, les erreurs sont traitées de manière ciblée. Dans cet exemple, si une erreur survient lors de la soumission, seul le champ password est réinitialisé à l’aide de form.reset("password"). Cela garantit que les autres champs du formulaire restent inchangés, améliorant ainsi l'expérience utilisateur en limitant les perturbations.

Combinaison des callbacks pour une gestion optimale

Grâce aux callbacks onSuccess, onError, et onFinish, vous avez un contrôle total sur la manière dont les soumissions sont gérées dans votre application Nuxt. Vous pouvez ainsi personnaliser les interactions utilisateur en fonction du succès ou de l'échec de la soumission, tout en maintenant une gestion fluide et réactive des formulaires.

Ces méthodes de gestion de soumission vous permettent non seulement d'améliorer l'expérience utilisateur, mais aussi de renforcer la fiabilité et la sécurité de vos échanges avec le serveur en garantissant un traitement clair des erreurs et des succès.

Gérer l’état du formulaire avec processing

Le champ processing est une propriété réactive qui t’indique si une action est en cours, par exemple lors de la soumission d’un formulaire. Cela te permet d'afficher un état "chargement" ou de désactiver les boutons pendant le traitement de la requête.

<button type="submit" :disabled="form.processing">Submit</button>

Avec cette simple utilisation, tu empêches les soumissions multiples pendant que le formulaire est en cours de traitement.

FAQ

Comment installer le module Nuxt Form pour gérer vos formulaires ?

Pour installer Nuxt Form et commencer à gérer facilement vos formulaires dans une application Nuxt, il suffit d'utiliser le CLI de Nuxt. Exécutez la commande suivante dans votre terminal :

npx nuxi module add @louislschvn/nuxt-form

Cette commande ajoutera automatiquement le module à votre projet Nuxt, simplifiant ainsi la gestion des formulaires réactifs, la validation, et les soumissions.

Est-ce que je peux contribuer au projet Nuxt Form ?

Oui, toute contribution est la bienvenue ! Si vous souhaitez améliorer Nuxt Form, vous pouvez cloner le dépôt GitHub et commencer à contribuer. Voici les étapes pour configurer le projet localement :

  1. Clonez le dépôt depuis GitHub :
    git clone git@github.com:LouisLSCHVN/nuxt-form.git
  2. Préparez l'environnement de développement :
    npm run dev:prepare
  3. Lancez le projet en mode développement :
    npm run dev

N’hésitez pas à soumettre des pull requests ou à signaler des issues sur le dépôt GitHub du projet !

Conclusion

Merci d'avoir pris le temps de lire cet article. J'espère que vous avez trouvé des réponses à vos questions et que cet aperçu du module Nuxt Form vous sera utile. N'hésitez pas à contribuer au projet, toutes les instructions sont disponibles dans le fichier README.md du dépôt GitHub.

Si vous avez apprécié le projet, n'hésitez pas à lui attribuer une étoile sur GitHub pour me soutenir.