Maîtrisez le NOUVEAU composant `<Form>` d'Inertia.js et routes avec Wayfinder: Optimisez vos projets Laravel avec Vue/React

#Introduction

Le nouveau composant <Form> d'Inertia.js révolutionne la gestion des formulaires en encapsulant le hook useForm et en automatisant le code répétitif. Il gère automatiquement la validation serveur, les erreurs, l'état de traitement et le téléchargement de fichiers, le tout sans rechargement de page. Cet article vous montre comment l'utiliser efficacement dans vos projets Laravel avec Vue.js.

#Sommaire

1. Prérequis techniques
2. Comprendre Wayfinder et la génération des routes
3. Concepts clés du composant Form
4. Création d'un formulaire
5. Modification avec formulaire
6. Propriétés et options essentielles
7. Bonnes pratiques
8. Conclusion

#1. Prérequis techniques

#Backend Laravel

• Laravel 12 avec inertiajs/inertia-laravel ≥ v2.0.10
• Routes resourceful et Form Request pour validation
• laravel/wayfinder
• Contrôleur RESTful

#Frontend Vue.js

• Vue.js 3 avec Composition API
• Inertiajs/vue3 version 2.1.0+
• TypeScript configuré

#Route Laravel

1Route::middleware(['auth', 'verified'])->group(function (): void {
2    Route::resource('students', StudentController::class);
3});
1Route::middleware(['auth', 'verified'])->group(function (): void {
2    Route::resource('students', StudentController::class);
3});

#2. Comprendre Wayfinder et la génération des routes

#Qu'est-ce que Wayfinder?

Wayfinder est un package Laravel officiel qui génère automatiquement des helpers TypeScript pour vos routes Laravel côté frontend. Il élimine les URL codées en dur et garantit la synchronisation parfaite entre votre backend et frontend.

#Génération des routes

Wayfinder analyse vos routes Laravel et crée des helpers JavaScript/TypeScript:

1// Route Laravel
2Route::resource('students', StudentController::class);
1// Route Laravel
2Route::resource('students', StudentController::class);

Génère côté frontend:

 1// resources/js/routes/students/index.ts
 2export const index = (options?: RouteQueryOptions): RouteDefinition<'get'> => ({
 3    url: index.url(options),
 4    method: 'get',
 5})
 6 
 7index.definition = {
 8    methods: ["get","head"],
 9    url: '/students',
10} satisfies RouteDefinition<["get","head"]>
11 
12 
13 
14export const create = (options?: RouteQueryOptions): RouteDefinition<'get'> => ({
15    url: create.url(options),
16    method: 'get',
17})
18 
19create.definition = {
20    methods: ["get","head"],
21    url: '/students/create',
22} satisfies RouteDefinition<["get","head"]>
23.
24.
25.
26 
27export const destroy = (args: { student: number | { id: number } } | [student: number | { id: number } ] | number | { id: number }, options?: RouteQueryOptions): RouteDefinition<'delete'> => ({
28    url: destroy.url(args, options),
29    method: 'delete',
30})
31 
32destroy.definition = {
33    methods: ["delete"],
34    url: '/students/{student}',
35}
 1// resources/js/routes/students/index.ts
 2export const index = (options?: RouteQueryOptions): RouteDefinition<'get'> => ({
 3    url: index.url(options),
 4    method: 'get',
 5})
 6 
 7index.definition = {
 8    methods: ["get","head"],
 9    url: '/students',
10} satisfies RouteDefinition<["get","head"]>
11 
12 
13 
14export const create = (options?: RouteQueryOptions): RouteDefinition<'get'> => ({
15    url: create.url(options),
16    method: 'get',
17})
18 
19create.definition = {
20    methods: ["get","head"],
21    url: '/students/create',
22} satisfies RouteDefinition<["get","head"]>
23.
24.
25.
26 
27export const destroy = (args: { student: number | { id: number } } | [student: number | { id: number } ] | number | { id: number }, options?: RouteQueryOptions): RouteDefinition<'delete'> => ({
28    url: destroy.url(args, options),
29    method: 'delete',
30})
31 
32destroy.definition = {
33    methods: ["delete"],
34    url: '/students/{student}',
35}

#Intégration avec le composant Form

Au lieu d'écrire manuellement:

1<Form action="/students" method="post">
1<Form action="/students" method="post">

Vous utilisez Wayfinder avec le pattern de liaison dynamique:

1<Form v-bind="StudentController.store.form()">
2    ou
3    <Form :action="studentsRoutes.store.form().url">
1<Form v-bind="StudentController.store.form()">
2    ou
3    <Form :action="studentsRoutes.store.form().url">

Cette syntaxe se décompose ainsi:

1. StudentController.store correspond à la méthode store de votre contrôleur
2. .form() retourne un objet contenant { action: '/students', method: 'POST' }
3. v-bind distribue ces propriétés au composant Form
4. :action définit dynamiquement l'URL de soumission du formulaire

#Avantages de Wayfinder

Type Safety: TypeScript détecte les erreurs de routes à la compilation.

1// ✅ Correct
2StudentController.store.form()
3 
4// ❌ Erreur TypeScript
5StudentController.stor.form() // Typo détectée
1// ✅ Correct
2StudentController.store.form()
3 
4// ❌ Erreur TypeScript
5StudentController.stor.form() // Typo détectée

Paramètres dynamiques: Pour les routes avec paramètres:

1<!-- Pour create/store: pas de paramètre -->
2<Form v-bind="StudentController.store.form()">
3 
4<!-- Pour update: ID requis -->
5<Form v-bind="StudentController.update.form(props.student.id)">
6 
7<!-- Pour delete: ID requis -->
8<Link v-bind="StudentController.destroy.link(student.id)" method="delete">
1<!-- Pour create/store: pas de paramètre -->
2<Form v-bind="StudentController.store.form()">
3 
4<!-- Pour update: ID requis -->
5<Form v-bind="StudentController.update.form(props.student.id)">
6 
7<!-- Pour delete: ID requis -->
8<Link v-bind="StudentController.destroy.link(student.id)" method="delete">

Refactoring sécurisé: Si vous renommez une route Laravel, Wayfinder met à jour automatiquement les helpers et TypeScript vous alertera sur tous les usages obsolètes.

#Différence entre action manuelle et Wayfinder

Approche manuelle (sans Wayfinder):

 1<template>
 2    <!-- URL codée en dur, risque d'erreur -->
 3    <Form action="/students" method="post">
 4        <!-- Champs -->
 5    </Form>
 6 
 7    <!-- Pour update, vous devez construire l'URL manuellement -->
 8    <Form :action="`/students/${student.id}`" method="put">
 9        <!-- Champs -->
10    </Form>
11</template>
 1<template>
 2    <!-- URL codée en dur, risque d'erreur -->
 3    <Form action="/students" method="post">
 4        <!-- Champs -->
 5    </Form>
 6 
 7    <!-- Pour update, vous devez construire l'URL manuellement -->
 8    <Form :action="`/students/${student.id}`" method="put">
 9        <!-- Champs -->
10    </Form>
11</template>

Problèmes:

• URL codées en dur
• Pas de vérification TypeScript
• Erreurs difficiles à détecter
• Maintenance complexe lors de changements de routes

Approche Wayfinder (recommandée):

 1<script setup lang="ts">
 2import StudentController from '@/actions/App/Http/Controllers/StudentController';
 3import type { Student } from '@/types/student';
 4 
 5interface Props {
 6    student?: Student;
 7}
 8const props = defineProps<Props>();
 9</script>
10 
11<template>
12    <!-- Pour création -->
13    <Form v-bind="StudentController.store.form()">
14        <!-- Champs -->
15    </Form>
16 
17    <!-- Pour mise à jour -->
18    <Form v-bind="StudentController.update.form(props.student.id)">
19        <!-- Champs -->
20    </Form>
21</template>
 1<script setup lang="ts">
 2import StudentController from '@/actions/App/Http/Controllers/StudentController';
 3import type { Student } from '@/types/student';
 4 
 5interface Props {
 6    student?: Student;
 7}
 8const props = defineProps<Props>();
 9</script>
10 
11<template>
12    <!-- Pour création -->
13    <Form v-bind="StudentController.store.form()">
14        <!-- Champs -->
15    </Form>
16 
17    <!-- Pour mise à jour -->
18    <Form v-bind="StudentController.update.form(props.student.id)">
19        <!-- Champs -->
20    </Form>
21</template>

Avantages:

• Type safety complet
• Auto-complétion dans l'IDE
• Détection des erreurs à la compilation
• Maintenance simplifiée

#Structure des fichiers générés

 1resources/js/
 2├── actions/
 3│   └── App/
 4│       └── Http/
 5│           └── Controllers/
 6│               └── StudentController.ts
 7├── routes/
 8│   └── students/
 9│        └── index.ts
10└── types/
11    └── student.ts
 1resources/js/
 2├── actions/
 3│   └── App/
 4│       └── Http/
 5│           └── Controllers/
 6│               └── StudentController.ts
 7├── routes/
 8│   └── students/
 9│        └── index.ts
10└── types/
11    └── student.ts

Le fichier StudentController.ts expose des méthodes correspondant aux actions de votre contrôleur:

 1 
 2export const store = (options?: RouteQueryOptions): RouteDefinition<'post'> => ({
 3    url: store.url(options),
 4    method: 'post',
 5})
 6 
 7store.definition = {
 8    methods: ["post"],
 9    url: '/students',
10} satisfies RouteDefinition<["post"]>
11 
12store.post = (options?: RouteQueryOptions): RouteDefinition<'post'> => ({
13    url: store.url(options),
14    method: 'post',
15})
16.
17.
18.
 1 
 2export const store = (options?: RouteQueryOptions): RouteDefinition<'post'> => ({
 3    url: store.url(options),
 4    method: 'post',
 5})
 6 
 7store.definition = {
 8    methods: ["post"],
 9    url: '/students',
10} satisfies RouteDefinition<["post"]>
11 
12store.post = (options?: RouteQueryOptions): RouteDefinition<'post'> => ({
13    url: store.url(options),
14    method: 'post',
15})
16.
17.
18.

#3. Concepts clés du composant Form

#Structure de base

Le composant nécessite deux attributs essentiels: action et method.

1<Form action="/users" method="post">
2  <input type="text" name="name" />
3  <button type="submit">Créer</button>
4</Form>
1<Form action="/users" method="post">
2  <input type="text" name="name" />
3  <button type="submit">Créer</button>
4</Form>

Point clé: Pas besoin de v-model, juste l'attribut name suffit. Le composant collecte automatiquement les valeurs.

#Accès à l'état via slot props

1<Form action="/users" method="post" #default="{ errors, processing, wasSuccessful }">
2  <input type="text" name="name" />
3  <span v-if="errors.name">{{ errors.name }}</span>
4 
5  <button type="submit" :disabled="processing">
6    {{ processing ? 'Création...' : 'Créer' }}
7  </button>
8</Form>
1<Form action="/users" method="post" #default="{ errors, processing, wasSuccessful }">
2  <input type="text" name="name" />
3  <span v-if="errors.name">{{ errors.name }}</span>
4 
5  <button type="submit" :disabled="processing">
6    {{ processing ? 'Création...' : 'Créer' }}
7  </button>
8</Form>

Propriétés disponibles:

• errors: Erreurs de validation
• processing: État de soumission
• wasSuccessful: Succès de la dernière soumission
• isDirty: Formulaire modifié
• setError, clearErrors: Manipulation des erreurs

#Support des structures imbriquées

1<Form action="/users" method="post">
2  <input type="text" name="user.name" />
3  <input type="text" name="address.street" />
4  <input type="text" name="tags[]" />
5</Form>
1<Form action="/users" method="post">
2  <input type="text" name="user.name" />
3  <input type="text" name="address.street" />
4  <input type="text" name="tags[]" />
5</Form>

Génère automatiquement:

1{
2  "user": { "name": "John" },
3  "address": { "street": "123 Main" },
4  "tags": ["tag1"]
5}
1{
2  "user": { "name": "John" },
3  "address": { "street": "123 Main" },
4  "tags": ["tag1"]
5}

#4. Création d'un formulaire

#Contrôleur Laravel

 1public function store(StudentRequest $request)
 2{
 3    $validated = $request->validated();
 4    $validated['profile'] = $this->handleProfileUpload($request);
 5 
 6    Student::create($validated);
 7 
 8    return redirect()->route('students.index')
 9        ->with('success', 'Étudiant créé avec succès.');
10}
 1public function store(StudentRequest $request)
 2{
 3    $validated = $request->validated();
 4    $validated['profile'] = $this->handleProfileUpload($request);
 5 
 6    Student::create($validated);
 7 
 8    return redirect()->route('students.index')
 9        ->with('success', 'Étudiant créé avec succès.');
10}

#Form Request

1public function rules(): array
2{
3    return [
4        'name' => ['required', 'string', 'max:255'],
5        'email' => ['required', 'email', 'unique:students'],
6        'profile' => ['nullable', 'image', 'max:2048'],
7        'bio' => ['nullable', 'string', 'max:500'],
8    ];
9}
1public function rules(): array
2{
3    return [
4        'name' => ['required', 'string', 'max:255'],
5        'email' => ['required', 'email', 'unique:students'],
6        'profile' => ['nullable', 'image', 'max:2048'],
7        'bio' => ['nullable', 'string', 'max:500'],
8    ];
9}

#Composant Vue.js

 1<script setup lang="ts">
 2import { Form, Head, Link } from '@inertiajs/vue3';
 3import StudentController from '@/actions/App/Http/Controllers/StudentController';
 4import * as studentsRoute from '@/routes/students';
 5import type { Student } from '@/types/student';
 6 
 7interface Props {
 8    student?: Student | null;
 9}
10defineProps<Props>();
11</script>
12 
13<template>
14    <Head title="Créer un étudiant" />
15 
16    <Form
17        v-bind="StudentController.store.form()"
18        enctype="multipart/form-data"
19        v-slot="{ errors, processing }"
20    >
21        <div class="form-group">
22            <label for="name">Nom complet</label>
23            <input
24                id="name"
25                name="name"
26                type="text"
27            />
28            <span v-if="errors.name" class="text-red-500">{{ errors.name }}</span>
29        </div>
30 
31        <div class="form-group">
32            <label for="email">Email</label>
33            <input
34                id="email"
35                name="email"
36                type="email"
37            />
38            <span v-if="errors.email" class="text-red-500">{{ errors.email }}</span>
39        </div>
40 
41        <div class="form-group">
42            <label for="profile">Photo de profil</label>
43            <input id="profile" name="profile" type="file" />
44            <span v-if="errors.profile" class="text-red-500">{{ errors.profile }}</span>
45        </div>
46 
47        <div class="form-group">
48            <label for="bio">Biographie</label>
49            <textarea id="bio" name="bio" :value="student?.bio"></textarea>
50            <span v-if="errors.bio" class="text-red-500">{{ errors.bio }}</span>
51        </div>
52 
53        <div class="form-actions">
54            <Link :href="studentsRoute.index().url" class="btn-secondary">
55                Retour
56            </Link>
57            <button type="submit" :disabled="processing" class="btn-primary">
58              {{ processing ? "Ajout en cours... ": "Ajouter un étudiant" }}
59            </button>
60        </div>
61    </Form>
62</template>
 1<script setup lang="ts">
 2import { Form, Head, Link } from '@inertiajs/vue3';
 3import StudentController from '@/actions/App/Http/Controllers/StudentController';
 4import * as studentsRoute from '@/routes/students';
 5import type { Student } from '@/types/student';
 6 
 7interface Props {
 8    student?: Student | null;
 9}
10defineProps<Props>();
11</script>
12 
13<template>
14    <Head title="Créer un étudiant" />
15 
16    <Form
17        v-bind="StudentController.store.form()"
18        enctype="multipart/form-data"
19        v-slot="{ errors, processing }"
20    >
21        <div class="form-group">
22            <label for="name">Nom complet</label>
23            <input
24                id="name"
25                name="name"
26                type="text"
27            />
28            <span v-if="errors.name" class="text-red-500">{{ errors.name }}</span>
29        </div>
30 
31        <div class="form-group">
32            <label for="email">Email</label>
33            <input
34                id="email"
35                name="email"
36                type="email"
37            />
38            <span v-if="errors.email" class="text-red-500">{{ errors.email }}</span>
39        </div>
40 
41        <div class="form-group">
42            <label for="profile">Photo de profil</label>
43            <input id="profile" name="profile" type="file" />
44            <span v-if="errors.profile" class="text-red-500">{{ errors.profile }}</span>
45        </div>
46 
47        <div class="form-group">
48            <label for="bio">Biographie</label>
49            <textarea id="bio" name="bio" :value="student?.bio"></textarea>
50            <span v-if="errors.bio" class="text-red-500">{{ errors.bio }}</span>
51        </div>
52 
53        <div class="form-actions">
54            <Link :href="studentsRoute.index().url" class="btn-secondary">
55                Retour
56            </Link>
57            <button type="submit" :disabled="processing" class="btn-primary">
58              {{ processing ? "Ajout en cours... ": "Ajouter un étudiant" }}
59            </button>
60        </div>
61    </Form>
62</template>

Points clés:

• v-bind="StudentController.store.form()": Génère automatiquement action et method via Wayfinder
• enctype="multipart/form-data": Pour les uploads de fichiers
• Pas de v-model
• processing pour désactiver les boutons pendant la soumission

#5. Modification avec formulaire

#Contrôleur

 1public function update(StudentRequest $request, Student $student)
 2{
 3    $validated = $request->validated();
 4    $validated['profile'] = $this->handleProfileUpload($request, $student);
 5 
 6    $student->update($validated);
 7 
 8    return redirect()->route('students.index')
 9        ->with('success', 'Étudiant mis à jour.');
10}
 1public function update(StudentRequest $request, Student $student)
 2{
 3    $validated = $request->validated();
 4    $validated['profile'] = $this->handleProfileUpload($request, $student);
 5 
 6    $student->update($validated);
 7 
 8    return redirect()->route('students.index')
 9        ->with('success', 'Étudiant mis à jour.');
10}

#Règles de validation avec ignore

1public function rules(): array
2{
3    $studentId = $this->route('student')?->id;
4 
5    return [
6        'email' => ['required', 'email', Rule::unique('students')->ignore($studentId)],
7        // Autres règles...
8    ];
9}
1public function rules(): array
2{
3    $studentId = $this->route('student')?->id;
4 
5    return [
6        'email' => ['required', 'email', Rule::unique('students')->ignore($studentId)],
7        // Autres règles...
8    ];
9}

#Composant Vue.js

 1<script setup lang="ts">
 2import { Form, Head, Link } from '@inertiajs/vue3';
 3import StudentController from '@/actions/App/Http/Controllers/StudentController';
 4import type { Student } from '@/types/student';
 5 
 6interface Props {
 7    student: Student;
 8}
 9 defineProps<Props>();
10</script>
11 
12<template>
13    <Head title="Modifier un étudiant" />
14 
15    <Form
16        v-bind="StudentController.update.form(props.student.id)"
17        enctype="multipart/form-data"
18        v-slot="{ errors, processing }"
19    >
20        <div class="form-group">
21            <label for="name">Nom complet</label>
22            <input id="name" name="name" type="text" :value="student.name" />
23            <span v-if="errors.name" class="text-red-500">{{ errors.name }}</span>
24        </div>
25 
26        <div class="form-group">
27            <label for="email">Email</label>
28            <input id="email" name="email" type="email" :value="student.email" />
29            <span v-if="errors.email" class="text-red-500">{{ errors.email }}</span>
30        </div>
31 
32        <div class="form-group">
33            <label for="bio">Biographie</label>
34            <textarea id="bio" name="bio" :value="student.bio"></textarea>
35            <span v-if="errors.bio" class="text-red-500">{{ errors.bio }}</span>
36        </div>
37 
38        <div class="form-actions">
39            <button type="submit" :disabled="processing" class="btn-primary">
40                <span v-if="processing">Enregistrement...</span>
41                <span v-else>Mettre à jour</span>
42            </button>
43        </div>
44    </Form>
45</template>
 1<script setup lang="ts">
 2import { Form, Head, Link } from '@inertiajs/vue3';
 3import StudentController from '@/actions/App/Http/Controllers/StudentController';
 4import type { Student } from '@/types/student';
 5 
 6interface Props {
 7    student: Student;
 8}
 9 defineProps<Props>();
10</script>
11 
12<template>
13    <Head title="Modifier un étudiant" />
14 
15    <Form
16        v-bind="StudentController.update.form(props.student.id)"
17        enctype="multipart/form-data"
18        v-slot="{ errors, processing }"
19    >
20        <div class="form-group">
21            <label for="name">Nom complet</label>
22            <input id="name" name="name" type="text" :value="student.name" />
23            <span v-if="errors.name" class="text-red-500">{{ errors.name }}</span>
24        </div>
25 
26        <div class="form-group">
27            <label for="email">Email</label>
28            <input id="email" name="email" type="email" :value="student.email" />
29            <span v-if="errors.email" class="text-red-500">{{ errors.email }}</span>
30        </div>
31 
32        <div class="form-group">
33            <label for="bio">Biographie</label>
34            <textarea id="bio" name="bio" :value="student.bio"></textarea>
35            <span v-if="errors.bio" class="text-red-500">{{ errors.bio }}</span>
36        </div>
37 
38        <div class="form-actions">
39            <button type="submit" :disabled="processing" class="btn-primary">
40                <span v-if="processing">Enregistrement...</span>
41                <span v-else>Mettre à jour</span>
42            </button>
43        </div>
44    </Form>
45</template>

Différences avec la création:

• StudentController.update.form(props.student.id): Route dynamique avec ID
• Méthode PUT et PATCH générée automatiquement par Wayfinder
• Valeurs pré-remplies depuis props.student

#6. Propriétés et options essentielles

#Transform: Modifier les données avant soumission

La propriété transform vous permet de manipuler les données du formulaire juste avant leur envoi au serveur. Cette fonction intercepte les données collectées et retourne l'objet final qui sera soumis.

Cas d'usage courants:

• Ajouter des champs cachés ou calculés
• Formatter des dates ou des nombres
• Nettoyer ou transformer des valeurs
• Ajouter des métadonnées (timestamps, user_id, etc.)

 1<Form
 2  action="/posts"
 3  method="post"
 4  :transform="(data) => ({
 5    ...data,
 6    user_id: currentUser.id,
 7    timestamp: Date.now(),
 8    slug: data.title.toLowerCase().replace(/\s+/g, '-')
 9  })"
10>
11  <input type="text" name="title" />
12  <textarea name="content"></textarea>
13  <button type="submit">Publier</button>
14</Form>
 1<Form
 2  action="/posts"
 3  method="post"
 4  :transform="(data) => ({
 5    ...data,
 6    user_id: currentUser.id,
 7    timestamp: Date.now(),
 8    slug: data.title.toLowerCase().replace(/\s+/g, '-')
 9  })"
10>
11  <input type="text" name="title" />
12  <textarea name="content"></textarea>
13  <button type="submit">Publier</button>
14</Form>

Exemple avec formatage de données:

 1<script setup>
 2const transformStudentData = (data) => {
 3  return {
 4    ...data,
 5    // Convertir le tableau en JSON si nécessaire
 6    programs: JSON.stringify(data.programs),
 7    // Formatter la date de naissance
 8    birth_date: data.birth_date ? new Date(data.birth_date).toISOString() : null,
 9    // Nettoyer les espaces
10    name: data.name.trim(),
11    email: data.email.toLowerCase().trim()
12  };
13};
14</script>
15 
16<template>
17  <Form action="/students" method="post" :transform="transformStudentData">
18    <!-- Champs du formulaire -->
19  </Form>
20</template>
 1<script setup>
 2const transformStudentData = (data) => {
 3  return {
 4    ...data,
 5    // Convertir le tableau en JSON si nécessaire
 6    programs: JSON.stringify(data.programs),
 7    // Formatter la date de naissance
 8    birth_date: data.birth_date ? new Date(data.birth_date).toISOString() : null,
 9    // Nettoyer les espaces
10    name: data.name.trim(),
11    email: data.email.toLowerCase().trim()
12  };
13};
14</script>
15 
16<template>
17  <Form action="/students" method="post" :transform="transformStudentData">
18    <!-- Champs du formulaire -->
19  </Form>
20</template>

#Options de visite

Les options de visite contrôlent le comportement d'Inertia lors de la soumission du formulaire. Elles sont regroupées sous la propriété options pour éviter la confusion entre les propriétés de soumission et celles de rechargement.

1<Form
2  action="/profile"
3  method="put"
4  :options="{
5    preserveScroll: true,
6    preserveState: true,
7    only: ['user', 'flash']
8  }"
9>
1<Form
2  action="/profile"
3  method="put"
4  :options="{
5    preserveScroll: true,
6    preserveState: true,
7    only: ['user', 'flash']
8  }"
9>

Explication des options principales:

preserveScroll (boolean): Maintient la position de défilement de la page après la soumission. Très utile pour les formulaires situés en milieu de page.

1<!-- Idéal pour un formulaire de commentaire au milieu d'une longue page -->
2<Form
3  action="/comments"
4  method="post"
5  :options="{ preserveScroll: true }"
6>
1<!-- Idéal pour un formulaire de commentaire au milieu d'une longue page -->
2<Form
3  action="/comments"
4  method="post"
5  :options="{ preserveScroll: true }"
6>

preserveState (boolean): Conserve l'état local des composants qui ne sont pas rechargés. Empêche la perte de données dans d'autres parties de votre interface.

1<!-- Garde l'état d'un formulaire de recherche ouvert -->
2<Form
3  action="/profile/update"
4  method="put"
5  :options="{ preserveState: true }"
6>
1<!-- Garde l'état d'un formulaire de recherche ouvert -->
2<Form
3  action="/profile/update"
4  method="put"
5  :options="{ preserveState: true }"
6>

preserveUrl (boolean): Empêche la modification de l'URL du navigateur après la soumission. Utile pour les formulaires modaux ou les actions qui ne devraient pas changer l'URL.

1<Form
2  action="/newsletter/subscribe"
3  method="post"
4  :options="{ preserveUrl: true }"
5>
1<Form
2  action="/newsletter/subscribe"
3  method="post"
4  :options="{ preserveUrl: true }"
5>

replace (boolean): Remplace l'entrée actuelle de l'historique au lieu d'en créer une nouvelle. Évite que l'utilisateur ne revienne sur des états intermédiaires.

1<Form
2  action="/wizard/step-2"
3  method="post"
4  :options="{ replace: true }"
5>
1<Form
2  action="/wizard/step-2"
3  method="post"
4  :options="{ replace: true }"
5>

only (array): Ne recharge que les propriétés spécifiées depuis le serveur. Optimise les performances en réduisant la taille de la réponse.

1<!-- Ne recharge que le profil utilisateur et les messages flash -->
2<Form
3  action="/profile"
4  method="put"
5  :options="{ only: ['user', 'flash'] }"
6>
1<!-- Ne recharge que le profil utilisateur et les messages flash -->
2<Form
3  action="/profile"
4  method="put"
5  :options="{ only: ['user', 'flash'] }"
6>

except (array): Exclut certaines propriétés du rechargement. Utile pour éviter de recharger des données volumineuses non affectées.

1<!-- Ne pas recharger la liste des produits lors de la mise à jour du profil -->
2<Form
3  action="/profile"
4  method="put"
5  :options="{ except: ['products', 'categories'] }"
6>
1<!-- Ne pas recharger la liste des produits lors de la mise à jour du profil -->
2<Form
3  action="/profile"
4  method="put"
5  :options="{ except: ['products', 'categories'] }"
6>

reset (array): Réinitialise des propriétés spécifiques à leurs valeurs par défaut après la visite.

1<Form
2  action="/search"
3  method="get"
4  :options="{ reset: ['page', 'filters'] }"
5>
1<Form
2  action="/search"
3  method="get"
4  :options="{ reset: ['page', 'filters'] }"
5>

Exemple combiné complet:

 1<script setup lang="ts">
 2import { Form } from '@inertiajs/vue3';
 3import type { User } from '@/types';
 4 
 5interface Props {
 6  user: User;
 7}
 8const props = defineProps<Props>();
 9</script>
10 
11<template>
12  <Form
13    v-bind="ProfileController.update.form(props.user.id)"
14    :options="{
15      preserveScroll: true,        // Garde la position
16      preserveState: true,         // Conserve l'état des autres composants
17      only: ['user', 'flash'],     // Ne recharge que user et flash
18      onSuccess: () => {
19        // Callback après succès
20        console.log('Profil mis à jour');
21      }
22    }"
23  >
24    <!-- Champs du formulaire -->
25  </Form>
26</template>
 1<script setup lang="ts">
 2import { Form } from '@inertiajs/vue3';
 3import type { User } from '@/types';
 4 
 5interface Props {
 6  user: User;
 7}
 8const props = defineProps<Props>();
 9</script>
10 
11<template>
12  <Form
13    v-bind="ProfileController.update.form(props.user.id)"
14    :options="{
15      preserveScroll: true,        // Garde la position
16      preserveState: true,         // Conserve l'état des autres composants
17      only: ['user', 'flash'],     // Ne recharge que user et flash
18      onSuccess: () => {
19        // Callback après succès
20        console.log('Profil mis à jour');
21      }
22    }"
23  >
24    <!-- Champs du formulaire -->
25  </Form>
26</template>

#Réinitialisation automatique

Les propriétés de réinitialisation automatisent le nettoyage des formulaires après soumission, améliorant l'expérience utilisateur.

resetOnSuccess: Réinitialise le formulaire après une soumission réussie.

1<!-- Réinitialiser tous les champs - Idéal pour formulaires de création -->
2<Form action="/users" method="post" resetOnSuccess>
3  <input type="text" name="name" />
4  <input type="email" name="email" />
5  <button type="submit">Créer</button>
6</Form>
1<!-- Réinitialiser tous les champs - Idéal pour formulaires de création -->
2<Form action="/users" method="post" resetOnSuccess>
3  <input type="text" name="name" />
4  <input type="email" name="email" />
5  <button type="submit">Créer</button>
6</Form>

Réinitialisation sélective: Ne réinitialise que certains champs spécifiques.

1<!-- Réinitialiser uniquement le mot de passe après soumission -->
2<Form action="/profile" method="put" :resetOnSuccess="['password', 'password_confirmation']">
3  <input type="text" name="name" value="John Doe" />
4  <input type="password" name="password" />
5  <input type="password" name="password_confirmation" />
6  <button type="submit">Mettre à jour</button>
7</Form>
1<!-- Réinitialiser uniquement le mot de passe après soumission -->
2<Form action="/profile" method="put" :resetOnSuccess="['password', 'password_confirmation']">
3  <input type="text" name="name" value="John Doe" />
4  <input type="password" name="password" />
5  <input type="password" name="password_confirmation" />
6  <button type="submit">Mettre à jour</button>
7</Form>

resetOnError: Réinitialise le formulaire en cas d'erreur. Moins courant mais utile pour certains cas.

 1<!-- Réinitialiser tout en cas d'erreur -->
 2<Form action="/payment" method="post" resetOnError>
 3  <input type="text" name="card_number" />
 4  <button type="submit">Payer</button>
 5</Form>
 6 
 7<!-- Réinitialiser des champs sensibles uniquement -->
 8<Form action="/payment" method="post" :resetOnError="['cvv', 'pin']">
 9  <input type="text" name="card_number" />
10  <input type="text" name="cvv" />
11  <button type="submit">Payer</button>
12</Form>
 1<!-- Réinitialiser tout en cas d'erreur -->
 2<Form action="/payment" method="post" resetOnError>
 3  <input type="text" name="card_number" />
 4  <button type="submit">Payer</button>
 5</Form>
 6 
 7<!-- Réinitialiser des champs sensibles uniquement -->
 8<Form action="/payment" method="post" :resetOnError="['cvv', 'pin']">
 9  <input type="text" name="card_number" />
10  <input type="text" name="cvv" />
11  <button type="submit">Payer</button>
12</Form>

setDefaultsOnSuccess: Définit les valeurs actuelles comme nouvelles valeurs par défaut après succès. Très utile pour les formulaires d'édition.

1<Form action="/profile" method="put" setDefaultsOnSuccess>
2  <input type="text" name="name" :value="user.name" />
3  <input type="email" name="email" :value="user.email" />
4  <button type="submit">Sauvegarder</button>
5</Form>
1<Form action="/profile" method="put" setDefaultsOnSuccess>
2  <input type="text" name="name" :value="user.name" />
3  <input type="email" name="email" :value="user.email" />
4  <button type="submit">Sauvegarder</button>
5</Form>

Pourquoi c'est important: Sans setDefaultsOnSuccess, après avoir sauvegardé un formulaire d'édition, le formulaire serait marqué comme "modifié" (isDirty: true) même sans changement, car les valeurs par défaut seraient toujours les anciennes. Cette propriété synchronise les valeurs par défaut avec les nouvelles valeurs sauvegardées.

Exemple pratique combiné:

 1<script setup lang="ts">
 2import { Form } from '@inertiajs/vue3';
 3 
 4const handleSuccess = () => {
 5  // Afficher une notification
 6  toast.success('Profil mis à jour avec succès');
 7};
 8</script>
 9 
10<template>
11  <!-- Formulaire d'édition avec mise à jour des valeurs par défaut -->
12  <Form
13    action="/profile"
14    method="put"
15    setDefaultsOnSuccess
16    @success="handleSuccess"
17  >
18    <input type="text" name="name" :value="user.name" />
19    <button type="submit">Sauvegarder</button>
20  </Form>
21 
22  <!-- Formulaire de création avec réinitialisation complète -->
23  <Form
24    action="/posts"
25    method="post"
26    resetOnSuccess
27    @success="handleSuccess"
28  >
29    <input type="text" name="title" />
30    <textarea name="content"></textarea>
31    <button type="submit">Publier</button>
32  </Form>
33 
34  <!-- Formulaire sensible avec réinitialisation sélective -->
35  <Form
36    action="/password/update"
37    method="put"
38    :resetOnSuccess="['current_password', 'password', 'password_confirmation']"
39  >
40    <input type="password" name="current_password" />
41    <input type="password" name="password" />
42    <input type="password" name="password_confirmation" />
43    <button type="submit">Changer le mot de passe</button>
44  </Form>
45</template>
 1<script setup lang="ts">
 2import { Form } from '@inertiajs/vue3';
 3 
 4const handleSuccess = () => {
 5  // Afficher une notification
 6  toast.success('Profil mis à jour avec succès');
 7};
 8</script>
 9 
10<template>
11  <!-- Formulaire d'édition avec mise à jour des valeurs par défaut -->
12  <Form
13    action="/profile"
14    method="put"
15    setDefaultsOnSuccess
16    @success="handleSuccess"
17  >
18    <input type="text" name="name" :value="user.name" />
19    <button type="submit">Sauvegarder</button>
20  </Form>
21 
22  <!-- Formulaire de création avec réinitialisation complète -->
23  <Form
24    action="/posts"
25    method="post"
26    resetOnSuccess
27    @success="handleSuccess"
28  >
29    <input type="text" name="title" />
30    <textarea name="content"></textarea>
31    <button type="submit">Publier</button>
32  </Form>
33 
34  <!-- Formulaire sensible avec réinitialisation sélective -->
35  <Form
36    action="/password/update"
37    method="put"
38    :resetOnSuccess="['current_password', 'password', 'password_confirmation']"
39  >
40    <input type="password" name="current_password" />
41    <input type="password" name="password" />
42    <input type="password" name="password_confirmation" />
43    <button type="submit">Changer le mot de passe</button>
44  </Form>
45</template>