Inertia.js

Inertia.js agit comme un pont entre le serveur et le client. Au lieu de renvoyer des pages HTML complètes ou de gérer une API REST/GraphQL, le serveur envoie directement les props aux composants front-end (Vue.js, React, ou Svelte). Ces composants sont rendus côté client et peuvent réagir instantanément aux interactions, donnant l’impression d’une application SPA.

Avec Inertia.js, vous :

• Conservez la logique côté serveur (Laravel, Rails…).
• Évitez la duplication des routes ou des API.
• Créez des applications réactives sans JavaScript complexe côté client.

Installation avec Laravel et Vue.js

1. Installer le package serveur Laravel :

1composer require inertiajs/inertia-laravel

2. Installer le client côté front-end :

1npm install @inertiajs/inertia @inertiajs/inertia-vue3

3. Configurer Inertia dans votre fichier app.js :

 1import { createApp, h } from 'vue'
 2import { createInertiaApp } from '@inertiajs/inertia-vue3'
 3 
 4createInertiaApp({
 5  resolve: name => require(`./Pages/${name}`).default,
 6  setup({ el, App, props, plugin }) {
 7    createApp({ render: () => h(App, props) })
 8      .use(plugin)
 9      .mount(el)
10  },
11})

Exemple de route Laravel

1use Inertia\Inertia;
2use Illuminate\Support\Facades\Route;
3 
4Route::get('/utilisateurs', function () {
5    $utilisateurs = \App\Models\User::all();
6    return Inertia::render('Utilisateurs/Index', [
7        'utilisateurs' => $utilisateurs
8    ]);
9});

Exemple de composant Vue.js

 1<template>
 2  <div>
 3    <h1>Liste des utilisateurs</h1>
 4    <ul>
 5      <li v-for="user in utilisateurs" :key="user.id">
 6        {{ user.name }}
 7      </li>
 8    </ul>
 9  </div>
10</template>
11 
12<script>
13export default {
14  props: {
15    utilisateurs: Array
16  }
17}
18</script>

Ici, la donnée utilisateurs est directement transmise depuis Laravel, et le composant Vue la rend dynamiquement.

Navigation et liens SPA

Pour naviguer sans recharger la page, Inertia utilise le composant <Link> :

1<template>
2  <inertia-link href="/utilisateurs">Voir les utilisateurs</inertia-link>
3</template>

Cela fonctionne comme un lien HTML normal mais garde l’application SPA fluide.

Formulaires avec Inertia.js

Inertia simplifie la gestion des formulaires :

 1<template>
 2  <form @submit.prevent="submit">
 3    <input v-model="form.nom" type="text" placeholder="Nom">
 4    <button type="submit">Envoyer</button>
 5  </form>
 6</template>
 7 
 8<script>
 9import { Inertia } from '@inertiajs/inertia'
10 
11export default {
12  data() {
13    return {
14      form: {
15        nom: ''
16      }
17    }
18  },
19  methods: {
20    submit() {
21      Inertia.post('/utilisateurs', this.form)
22    }
23  }
24}
25</script>

Le formulaire est envoyé côté serveur et Inertia met automatiquement à jour la page sans rechargement complet.

Bonnes pratiques

• Créer des composants Vue/React/Svelte réutilisables pour vos pages.
• Passer uniquement les données nécessaires depuis le serveur pour optimiser la performance.
• Profiter de la navigation SPA pour améliorer l’expérience utilisateur.
• Utiliser Inertia.js avec Laravel Jetstream ou Livewire pour enrichir les interactions.
• Structurer les pages dans un dossier /Pages pour maintenir la clarté du projet.

Inertia.js permet de construire des applications web modernes et réactives en gardant la simplicité du rendu côté serveur. C’est une solution idéale pour les développeurs Laravel ou Rails qui souhaitent des interfaces SPA sans avoir à gérer une API séparée ou un front-end complexe.