> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend
> Guide d'introduction pour choisir comment combiner Blade, Livewire, Inertia, React, Vue, Svelte, SPA et Vite avec Laravel 13.
## Vue d'ensemble
Laravel est un framework backend, mais il accorde aussi une grande importance à l'expérience de développement côté frontend.\
Sous Laravel 13, deux voies sont proposées : rester principalement en PHP, ou tirer parti de frameworks JavaScript comme React, Vue ou Svelte.
Pour choisir l'approche, posez-vous ces trois questions :
* Voulez-vous écrire l'UI principalement en **PHP** ?
* Voulez-vous écrire l'UI principalement en **JavaScript / TypeScript** ?
* Souhaitez-vous tout garder dans un même dépôt, ou séparer API et SPA ?
```mermaid theme={null}
flowchart TD
A["Application Laravel"] --> B{"Où construire l'UI ?"}
A --> G["Build des assets avec Vite"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + SPA indépendante"]
C --> C1["HTML renvoyé par le serveur"]
D --> D1["UI dynamique pilotée par PHP"]
E --> E1["Expérience SPA dans un même dépôt"]
F --> F1["Intégration avec un autre frontend ou une app mobile"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## Rester en PHP
### Blade
[Blade](/fr/blade) est le moteur de templates natif de Laravel. Depuis un contrôleur ou une route, vous retournez une vue et le serveur envoie du HTML au navigateur.
**Avantages**
* Intégration naturelle avec le routage, la validation et l'authentification Laravel
* Tout en PHP, faible courbe d'apprentissage
* Bon pour le SEO et le rendu initial
**Inconvénients**
* Chaque navigation ou soumission tend à rafraîchir toute la page
* Les interactions complexes nécessitent du JavaScript supplémentaire
Blade convient aux back-offices, aux outils internes, aux écrans axés contenu et aux applications à formulaires.
### Livewire
[Laravel Livewire](https://livewire.laravel.com) part de Blade tout en permettant de construire des UI plus dynamiques principalement en PHP. Modales, recherches, édition en ligne… vous obtenez une expérience proche de React ou Vue.
**Avantages**
* Construire des UI dynamiques dans la continuité de PHP et Blade
* Bonne intégration avec la gestion d'état et la validation de Laravel
* Facile à compléter avec Alpine.js pour de petits ajouts JavaScript
**Inconvénients**
* Moins doué pour la gestion d'état côté client complexe qu'un framework JS
* Peut être inadapté à de grands SPA où le frontend prédomine
Pour en savoir plus, consultez [Introduction à Livewire](/fr/blog/livewire-introduction).
### Kit de démarrage PHP-first
Le [kit de démarrage](/fr/starter-kits) de Laravel 13 propose une option basée sur **Livewire** pour les équipes qui veulent aller jusqu'à l'**UI dynamique** en restant en PHP. Une configuration Blade pure reste possible, mais l'option PHP-first des kits de démarrage est Livewire. Authentification, layout et configuration Vite sont fournis, ce qui vous permet de démarrer très vite.
## Utiliser un framework JavaScript
### Inertia + React / Vue / Svelte
[Inertia](https://inertiajs.com) sert de pont : vous continuez à utiliser routes, contrôleurs et authentification Laravel, tout en construisant les composants de page en React, Vue ou Svelte. Sans séparation totale entre API et SPA, vous obtenez une UI moderne dans une seule application Laravel.
**Avantages**
* Bénéficier du modèle par composants de React / Vue / Svelte
* Confier routage et authentification à Laravel
* Gérer backend et frontend dans un même dépôt
**Inconvénients**
* Plus à apprendre qu'une configuration Blade pure
* Familiarité avec la chaîne d'outils Node.js et TypeScript souvent requise
Les kits de démarrage officiels de Laravel 13 proposent d'emblée **React / Vue / Svelte + Inertia**.
Consultez [Introduction à Inertia](/fr/blog/inertia-introduction), [Introduction à React](/fr/blog/react-introduction), [Introduction à Vue](/fr/blog/vue-introduction) et [Introduction à Svelte](/fr/blog/svelte-introduction) pour plus de détails.
### Séparer API et SPA indépendante
Vous pouvez aussi complètement dissocier le frontend et utiliser Laravel comme API pour une SPA distincte ou une application mobile. Pratique quand plusieurs clients partagent le même backend.
Dans ce cas, Laravel s'occupe principalement de :
* Fournir les routes API
* L'authentification / autorisation (par exemple avec [Sanctum](/fr/sanctum))
* Formater les réponses JSON (par exemple avec [Eloquent API Resources](/fr/eloquent-resources))
**Avantages**
* Déploiement facile vers plusieurs clients (web, mobile, desktop)
* Choix des technologies frontend indépendant de Laravel
**Inconvénients**
* Authentification, récupération des données et déploiement doivent être conçus séparément
* Plus complexe qu'une application Laravel unique
### Kit de démarrage JavaScript-first
Les [kits de démarrage](/fr/starter-kits) fournissent Inertia, React / Vue / Svelte, Tailwind CSS et Vite prêts à l'emploi. Les écrans d'authentification sont déjà là ; concentrez-vous sur l'UI.
## Regrouper les assets avec Vite
Quelle que soit l'approche, sous Laravel 13 vous utilisez généralement [Vite](/fr/vite) pour builder CSS et JavaScript. Blade et Livewire embarquent des scripts et styles légers ; Inertia embarque tout le frontend applicatif.
Les avantages de Vite :
* HMR rapide en développement local
* Bundling et versioning des assets de production
* Intégration avec la directive `@vite()` de Laravel
Les kits de démarrage de Laravel 13 sont pré-configurés avec Vite.
## Comparaison des approches
| Approche | Cas d'usage | Avantages | Inconvénients |
| ------------------------------ | --------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
| Blade | Pages axées contenu, back-offices à formulaires | Simple et facile à apprendre. Intégration naturelle avec Laravel | Rechargements de page fréquents pour des UI avancées |
| Livewire | Applications métier avec UI dynamique centrées PHP | UI réactive tout en restant en PHP | Moins adapté à la gestion d'état client complexe |
| Inertia + React / Vue / Svelte | Applications combinant UI moderne et Laravel unifié | Expérience SPA dans un seul dépôt | Nécessite de maîtriser JavaScript / TypeScript |
| API + SPA indépendante | Produits impliquant plusieurs clients ou mobile | Frontend indépendant, facilement déployable | Authentification, déploiement et exploitation plus complexes |
## Prochaines étapes
Consultez les bases du rendu côté serveur.
Comparez les configurations initiales React, Vue, Svelte et Livewire.
Apprenez serveur de dev, HMR et build de production.
Découvrez comment Inertia relie Laravel et les frameworks JavaScript.
## Related topics
- [Créer un starter kit Laravel](/fr/advanced/starter-kit-creation.md)
- [Connaissances requises avant de commencer avec Laravel](/fr/true-tutorial.md)
- [Bundling des assets avec Vite](/fr/vite.md)
- [Installation](/fr/installation.md)
- [Introduction à Svelte — bases pour l'utiliser avec Inertia × Laravel](/fr/blog/svelte-introduction.md)