Aller au contenu
PROJET WEB DYNAMIQUE

Installation

Installation de Laravel avec un Starter Kit (Vue + Inertia.js)

Pour intégrer Inertia.js dans un nouveau projet Laravel, Laravel propose désormais des Starter Kits clés en main qui simplifient drastiquement l'installation. Fini les étapes interminables, tout se fait en quelques commandes ! 🚀

Prérequis

Avant de commencer, assurez-vous d'avoir installé :

  • PHP (version 8.2 ou supérieure)
  • Composer
  • Node.js et npm

Étape 1 : Installation du Laravel Installer

Le Laravel Installer est un outil CLI qui facilite la création de projets Laravel. Si vous ne l'avez pas encore, installez-le globalement via Composer :

composer global require laravel/installer

Note : Assurez-vous que le répertoire des binaires globaux de Composer est dans votre PATH système pour pouvoir utiliser la commande laravel.

Étape 2 : Création du Projet

Créez un nouveau projet Laravel avec le Starter Kit interactif. Dans votre terminal, exécutez :

laravel new mon-projet

Remplacez mon-projet par le nom de votre application.

Étape 3 : Sélection Interactive des Options

Le Laravel Installer va vous poser plusieurs questions pour configurer votre projet. Voici ce que vous allez rencontrer :

1. Choix du Starter Kit

Which starter kit would you like to install? [None]:
  [none     ] None
  [react    ] React
  [vue      ] Vue
  [livewire ] Livewire

Sélectionnez vue pour utiliser Vue.js avec Inertia.js. ✅

2. Choix du Provider d'Authentification

Which authentication provider do you prefer? [Laravel's built-in authentication]:
  [laravel] Laravel's built-in authentication
  [workos ] WorkOS (Requires WorkOS account)
  [none   ] No authentication scaffolding

Sélectionnez laravel pour utiliser le système d'authentification natif de Laravel (recommandé pour la plupart des projets).

3. Choix du Framework de Tests

Which testing framework do you prefer? [Pest]:
  [0] Pest
  [1] PHPUnit

Sélectionnez Pest (c'est la recommandation moderne de Laravel). Si tu préfères PHPUnit, choisis-le, mais bon... Pest c'est mieux 😏

4. Laravel Boost (Optionnel)

Do you want to install Laravel Boost to improve AI assisted coding? (yes/no) [yes]:

Sélectionnez no pour un projet standard (sauf si tu veux expérimenter avec les fonctionnalités d'assistance IA).

Étape 4 : Installation et Compilation

Une fois les options sélectionnées, le Laravel Installer va :

  1. Télécharger et installer le starter kit Vue
  2. Configurer Inertia.js
  3. Installer toutes les dépendances nécessaires

Étape 5 : Finaliser l'Installation

Une fois le projet créé, naviguez dans le dossier :

cd mon-projet

Installez les dépendances frontend et lancez le build :

npm install && npm run build

Enfin, démarrez le serveur de développement Laravel :

composer run dev

Configuration Optionnelle

Désactiver la Double Authentification pour l'Utilisateur de Test

Les nouveaux starter kits activent la double authentification (2FA) par défaut pour les utilisateurs créés via les seeders. Si vous voulez désactiver cette fonctionnalité pour votre utilisateur de test, modifiez le fichier database/seeders/DatabaseSeeder.php :

<?php

namespace Database\Seeders;

use App\Models\User;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        User::factory()->withoutTwoFactor()->create([
            'name' => 'Test User',
            'email' => 'test@example.com',
        ]);
    }
}

Note : La méthode withoutTwoFactor() désactive explicitement la 2FA pour cet utilisateur. 🔓

Ensuite, exécutez le seeder :

php artisan db:seed

Structure du Projet

Après l'installation, votre projet contiendra :

  • Backend Laravel : Controllers, routes, modèles dans app/, routes/, etc.
  • Frontend Vue.js : Composants, pages et layouts dans resources/js/
  • Inertia.js : Configuré et prêt à l'emploi pour lier Laravel et Vue
  • Tailwind CSS v4 : Préconfiguré avec shadcn-vue pour des composants UI modernes
  • Authentification complète : Login, register, password reset, profil utilisateur, 2FA

Arborescence Frontend (Vue)

resources/js/
├── components/    # Composants Vue réutilisables
├── composables/   # Composables / hooks Vue
├── layouts/       # Layouts d'application (sidebar, header, auth)
├── lib/           # Fonctions utilitaires et configuration
├── pages/         # Pages de l'application (composants Inertia)
└── types/         # Définitions TypeScript

Layouts Disponibles

Le Vue Starter Kit propose plusieurs layouts prédéfinis que tu peux personnaliser :

Layouts Principaux

  • Sidebar Layout (par défaut) : Barre latérale pour la navigation
  • Header Layout : Navigation en en-tête horizontal

Pour changer de layout, modifie resources/js/layouts/AppLayout.vue :

// Par défaut (sidebar)
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

// Alternative (header)
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Variantes de Sidebar

  • variant="sidebar" (par défaut)
  • variant="inset"
  • variant="floating"

Modifie resources/js/components/AppSidebar.vue pour changer la variante :

<Sidebar collapsible="icon" variant="sidebar">

Layouts d'Authentification

  • Simple (par défaut)
  • Card
  • Split

Pour changer le layout d'authentification, modifie resources/js/layouts/AuthLayout.vue :

// Par défaut (simple)
import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

// Alternatives
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Conclusion

Avec cette nouvelle approche, installer Laravel + Vue.js + Inertia.js est devenu ridiculement simple 🎯 :

  1. composer global require laravel/installer
  2. laravel new mon-projet
  3. Sélectionner les options interactivement
  4. npm install && npm run build
  5. composer run dev

C'est tout ! Plus besoin de jongler avec Jetstream, Breeze, ou des commandes Artisan obscures. L'installation est interactive, moderne, et te donne un projet production-ready dès le départ.

Tu peux maintenant te concentrer sur construire ton application plutôt que de configurer ton environnement pendant des heures. Bienvenue en 2025 🚀

Ressources