Comment relier Laravel et Vue.js dans un même projet ?

Écrit par : Thibault Chazottes

24/06/2026

Comment relier Laravel et Vue.js dans un même projet ?

Lorsque l'on apprend Laravel puis Vue.js, une question revient très souvent :

J'ai appris Laravel.

J'ai appris Vue.js.

Mais comment est-ce que je fais communiquer les deux dans un vrai projet ?

C'est une question légitime — et c'est précisément le sujet de cet article, avec des extraits vidéo et une formation complète sur un projet de réservation d'hôtel.

D’un côté, Laravel gère les routes, les contrôleurs, la base de données, l’authentification et les règles métier.

De l’autre, Vue.js permet de créer des interfaces modernes, réactives et agréables à utiliser.

La difficulté n’est donc pas d’apprendre Laravel ou Vue.js séparément.

La difficulté est de comprendre comment faire travailler les deux ensemble.

Première approche : transmettre des données avec JSON et les props

Lorsque Laravel génère une page Blade, il peut transmettre des données directement à Vue.js grâce au format JSON.

Un modèle Eloquent peut être transformé puis passé à un composant Vue via les props :

{{-- resources/views/hotels/index.blade.php --}}
<div id="app">
    <hotel-list :hotels='@json($hotels)'></hotel-list>
</div>

// resources/js/components/HotelList.vue
defineProps({
    hotels: {
        type: Array,
        required: true,
    },
})

Cette approche est simple, rapide et parfaitement adaptée lorsque les données circulent principalement du backend vers le frontend.

Deuxième approche : utiliser une API

Les besoins deviennent rapidement plus complexes.

Prenons l’exemple d’un panier :

ajouter un produit ;
supprimer un produit ;
modifier une quantité ;
valider une commande.

Dans ce cas, Vue.js doit pouvoir communiquer avec Laravel à la demande.

La solution la plus classique consiste à créer une API Laravel que Vue.js appellera avec Fetch ou Axios :

// routes/api.php
Route::post('/cart/items', [CartController::class, 'store']);

// Exemple avec Axios côté Vue.js
await axios.post('/api/cart/items', {
    room_id: room.id,
    quantity: 1,
})

Laravel devient la source de vérité des données tandis que Vue.js gère l’expérience utilisateur.

Et Vue Router dans tout ça ?

Lorsque l’application grandit, il devient intéressant d’utiliser Vue Router afin de gérer la navigation directement côté frontend.

On obtient alors une expérience beaucoup plus fluide, avec moins de rechargements de page — idéal pour un parcours de réservation en plusieurs étapes.

Et pour partager les données ?

Un autre problème apparaît rapidement : comment partager certaines informations entre plusieurs pages ou composants ?

C’est précisément le rôle d’un gestionnaire d’état comme Pinia.

Grâce à lui, il devient facile de centraliser le panier, l’utilisateur connecté ou d’autres données transverses, accessibles dans toute l’application.

Existe-t-il d’autres solutions ?

Oui. L’écosystème Laravel propose aujourd’hui plusieurs approches :

Livewire

Livewire permet de créer des interfaces dynamiques tout en restant principalement en PHP. Très efficace pour de l’interactivité sans SPA complète.

Inertia

Inertia permet d’utiliser Vue.js, React ou Svelte sans développer une API REST complète : Laravel renvoie des composants comme des réponses.

API Laravel + Vue.js

L’approche que j’utilise dans mon dernier projet consiste à construire une véritable API Laravel consommée par un frontend Vue.js.

Cette architecture est particulièrement intéressante lorsque l’on souhaite comprendre précisément ce qui se passe entre le frontend et le backend — et la réutiliser sur d’autres projets (mobile, partenaires, etc.).

Extraits vidéo (playlist)

J’ai publié une playlist YouTube avec des extraits tirés du cours, pour voir concrètement comment Laravel et Vue.js communiquent (props, panier, évolution Blade → SPA) :