Pourquoi ?

Pourquoi utiliser Inertia ?

Introduction Générale

Dans le développement web, combiner Laravel (backend) et Vue.js (frontend) est courant pour créer des applications dynamiques. Traditionnellement, ces deux parties communiquent via des requêtes AJAX, en utilisant des outils comme Axios ou Fetch.

Problèmes de la méthode traditionnelle :

Duplication de logique (validation, gestion des données)
Gestion complexe des états côté client et serveur
Code répétitif pour gérer erreurs, chargement, succès...

Inertia.js propose une alternative moderne, agissant comme un "pont" entre Laravel et Vue.js. Il élimine le besoin d'API REST ou GraphQL et permet de créer des applications fluides et réactives sans sacrifier la simplicité d'un monolithe.

Dans ce chapitre, nous verrons :

La méthode traditionnelle avec Axios/Fetch, illustrée par des exemples
Les avantages d'Inertia.js et comment il simplifie ces interactions
Le nouveau composant <Form> d'Inertia (l'approche recommandée)
Le helper useForm pour un contrôle programmatique avancé

Méthode Traditionnelle

Dans une architecture classique, le frontend (Vue.js) communique avec le backend (Laravel) via des appels API. Ces interactions se font souvent à l'aide de bibliothèques comme Axios ou l'API native Fetch.

chatgpt image 10 mai 2026, 22_33_03 (1)

Récupérer les données d'une page

Prenons l'exemple d'une page qui affiche une liste d'articles. Avec la méthode traditionnelle :

Une requête est envoyée depuis le frontend pour récupérer les données
Les données reçues sont stockées dans une variable locale pour être affichées

Code exemple avec Axios :

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const articles = ref([]);

onMounted(async () => {
  const response = await axios.get('/api/articles'); // Requête API
  articles.value = response.data; // Stockage des données
});
</script>

<template>
  <div>
    <h1>Articles</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
    </ul>
  </div>
</template>

Soumettre un formulaire

Pour envoyer un formulaire (par exemple, pour créer un nouvel article) :

Les données sont collectées et envoyées au backend via une requête POST
Le frontend doit gérer manuellement les erreurs de validation renvoyées par le backend

Code exemple avec Axios :

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const formData = ref({ title: '', content: '' });
const errors = ref({});

const submitForm = async () => {
  try {
    const response = await axios.post('/api/articles', formData.value); // Requête POST
    console.log(response.data); // Succès
  } catch (err) {
    errors.value = err.response.data.errors || {}; // Gestion des erreurs
  }
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.title" placeholder="Title" />
    <textarea v-model="formData.content" placeholder="Content"></textarea>
    <button type="submit">Submit</button>
    <div v-if="errors.title">{{ errors.title }}</div>
    <div v-if="errors.content">{{ errors.content }}</div>
  </form>
</template>

Limites de cette méthode

Gestion manuelle des états : Il faut écrire du code pour gérer les transitions entre états (chargement, succès, erreurs)
Duplication de logique : La validation des données doit être implémentée à la fois côté backend (Laravel) et côté frontend (Vue.js)
Complexité croissante : Avec plusieurs pages ou formulaires, la gestion devient plus difficile à maintenir

C'est pour répondre à ces défis qu'Inertia.js propose une approche différente, simplifiant considérablement ces interactions.

Introduction à Inertia.js

Inertia.js simplifie la gestion des interactions entre Laravel (backend) et Vue.js (frontend). Plutôt que de communiquer via des appels API explicites, Inertia agit comme un "pont" qui transmet directement les données et affiche les composants Vue.js sans recharger la page.

Fonctionnement d'Inertia

Avec Inertia :

Le backend génère des réponses qui incluent les données nécessaires et le composant Vue.js correspondant
Les transitions entre les pages se font sans rechargement complet, offrant une expérience utilisateur fluide
La logique est centralisée : la gestion des données, des erreurs et des transitions est simplifiée

Exemple : Récupérer les données d'une page

Inertia permet de transmettre les données directement du backend au frontend sans besoin de requêtes API explicites.

Backend Laravel :

use Inertia\Inertia;

Route::get('/articles', function () {
    $articles = Article::all();
    return Inertia::render('Articles', ['articles' => $articles]);
});

Frontend Vue.js :

<script setup>
defineProps(['articles']);
</script>

<template>
  <div>
    <h1>Articles</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
    </ul>
  </div>
</template>

Dans cet exemple, Inertia transmet les données $articles directement au composant Vue, éliminant le besoin d'un appel API côté client.

Le Composant `<Form>` : L'Approche Moderne (2025+)

Depuis 2025, Inertia propose un composant <Form> qui simplifie drastiquement la création de formulaires. C'est désormais l'approche recommandée pour la majorité des cas d'usage.

Fonctionnement

Le composant <Form> se comporte comme un formulaire HTML classique, mais utilise Inertia en arrière-plan pour éviter les rechargements complets de page. Pas besoin de v-model ni de gestion manuelle des données : il suffit de donner un attribut name à chaque input.

Backend Laravel :

use Illuminate\Http\Request;

Route::post('/articles', function (Request $request) {
    $validated = $request->validate([
        'title' => 'required|string|max:255',
        'content' => 'required',
    ]);

    Article::create($validated);

    return redirect()->route('articles'); // Redirection après succès
});

Frontend Vue.js :

<script setup>
import { Form } from '@inertiajs/vue3';
</script>

<template>
  <Form action="/articles" method="post">
    <input type="text" name="title" placeholder="Title" />
    <textarea name="content" placeholder="Content"></textarea>
    <button type="submit">Create Article</button>
  </Form>
</template>

✨ C'est tout ! Pas de v-model, pas de gestion manuelle de state. Le composant gère automatiquement la soumission, les erreurs et les états.

Afficher les Erreurs et États

Le composant <Form> expose des slot props pour accéder aux erreurs, états de chargement, etc.

<script setup>
import { Form } from '@inertiajs/vue3';
</script>

<template>
  <Form 
    action="/articles" 
    method="post"
    #default="{ errors, processing, wasSuccessful }"
  >
    <input type="text" name="title" placeholder="Title" />
    <div v-if="errors.title">{{ errors.title }}</div>

    <textarea name="content" placeholder="Content"></textarea>
    <div v-if="errors.content">{{ errors.content }}</div>

    <button type="submit" :disabled="processing">
      {{ processing ? 'Creating...' : 'Create Article' }}
    </button>

    <div v-if="wasSuccessful" class="success">Article created! 🎉</div>
  </Form>
</template>

chatgpt image 10 mai 2026, 22_33_03 (2)

Fonctionnalités Avancées

Le composant <Form> supporte :

Structures de données imbriquées : name="report[description]" ou name="user.email"
Upload de fichiers : <input type="file" name="documents" multiple />
Transformation des données : :transform="data => ({ ...data, user_id: 123 })"
Réinitialisation automatique : resetOnSuccess ou resetOnError
Dotted key notation : name="user.profile.bio" crée automatiquement { user: { profile: { bio: "..." } } }

Le Helper `useForm` : Pour un Contrôle Programmatique

Si tu as besoin d'un contrôle plus fin sur tes formulaires (modifications dynamiques, logique complexe), Inertia fournit toujours le helper useForm.

Frontend Vue.js :

<script setup>
import { useForm } from '@inertiajs/vue3';

const form = useForm({
  title: '',
  content: '',
});

const submitForm = () => {
  form.post('/articles', {
    onSuccess: () => form.reset(), // Réinitialise après succès
  });
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.title" placeholder="Title" />
    <div v-if="form.errors.title">{{ form.errors.title }}</div>

    <textarea v-model="form.content" placeholder="Content"></textarea>
    <div v-if="form.errors.content">{{ form.errors.content }}</div>

    <button :disabled="form.processing" type="submit">
      {{ form.processing ? 'Submitting...' : 'Submit' }}
    </button>
  </form>
</template>

Quand utiliser `useForm` ?

Tu as besoin de manipuler les données dynamiquement avant soumission
Tu veux un contrôle programmatique total (transformations, validations client, etc.)
Ton formulaire a une logique métier complexe

Pour les cas simples, préfère le composant <Form> ! 🎯

chatgpt image 10 mai 2026, 22_33_04 (3)

Wayfinder : Le Type-Safety pour tes Routes (Bonus)

Wayfinder est une fonctionnalité (relativement récente) qui génère des fonctions TypeScript type-safe pour tes routes Laravel. Au lieu d'écrire des URLs en dur, tu peux faire :

<script setup>
import { Form } from '@inertiajs/vue3';
import { store } from 'App/Http/Controllers/ArticleController'; // Import auto-généré
</script>

<template>
  <Form :action="store()">
    <input type="text" name="title" />
    <button type="submit">Create</button>
  </Form>
</template>

Avantages :

Type-safety : ton IDE t'avertit si une route n'existe pas
Refactoring sécurisé : renommer une route met à jour tous les appels
Pas de magic strings : finies les erreurs de typo sur /artcles au lieu de /articles

Wayfinder fonctionne avec le composant <Form>, le helper useForm, et les appels router manuels. On lui consacrera un chapitre dédié plus tard. 😉

Avantages d'Inertia.js

Transitions fluides : Les changements de page ne nécessitent pas de rechargement complet
Gestion simplifiée des formulaires : Le composant <Form> réduit drastiquement le code nécessaire
Moins de duplication : La logique de validation reste côté backend, sans réplication frontend
Architecture monolithique : Pas besoin d'API REST séparée, tout reste dans Laravel
Developer Experience : Avec Wayfinder, tu as même du type-safety sur tes routes

Avec ces fonctionnalités, Inertia facilite la création d'applications modernes tout en conservant la simplicité d'une architecture monolithique. En 2025, c'est LE standard pour du Laravel + Vue.js. 🚀

Pourquoi ?

Pourquoi utiliser Inertia ?

Introduction Générale#

Problèmes de la méthode traditionnelle :#

Méthode Traditionnelle#

Récupérer les données d'une page#

Soumettre un formulaire#

Limites de cette méthode#

Introduction à Inertia.js#

Fonctionnement d'Inertia#

Exemple : Récupérer les données d'une page#

Le Composant <Form> : L'Approche Moderne (2025+)#

Fonctionnement#

Afficher les Erreurs et États#

Fonctionnalités Avancées#

Le Helper useForm : Pour un Contrôle Programmatique#

Quand utiliser useForm ?#

Wayfinder : Le Type-Safety pour tes Routes (Bonus)#

Avantages d'Inertia.js#

Introduction Générale

Problèmes de la méthode traditionnelle :

Méthode Traditionnelle

Récupérer les données d'une page

Soumettre un formulaire

Limites de cette méthode

Introduction à Inertia.js

Fonctionnement d'Inertia

Exemple : Récupérer les données d'une page

Le Composant `<Form>` : L'Approche Moderne (2025+)

Fonctionnement

Afficher les Erreurs et États

Fonctionnalités Avancées

Le Helper `useForm` : Pour un Contrôle Programmatique

Quand utiliser `useForm` ?

Wayfinder : Le Type-Safety pour tes Routes (Bonus)

Avantages d'Inertia.js