How does Laravel integrate with other technologies, such as Vue.js and React?
In Laravel, frontend integration with Vue.js and React follows a well-defined modern standard. The ecosystem has converged around Vite for asset bundling and Inertia.js 2 as the integration bridge, enabling a clean and scalable full-stack development experience.
1. The Integration Standard (Laravel)
The modern standard for integrating Vue.js or React with Laravel is the combination of Vite and Inertia.js. Vite provides fast builds and instant Hot Module Replacement (HMR), while Inertia.js acts as the bridge between Laravel controllers and frontend components.
This approach enables a “Monolith SPA” architecture, where developers build single-page applications using classic Laravel routing, controllers, and middleware—without maintaining a separate frontend application or client-side router.
Laravel ships with first-class support for Inertia 2.0 and Tailwind CSS 4, making this stack the default choice for modern Laravel applications.
2. The Automated Path (Starter Kits – Recommended)
For new projects, the recommended and most common senior-level approach is using Laravel Starter Kits. These kits automatically configure Vite, Inertia, Tailwind CSS, authentication, and middleware.
Installation Process
Create a new Laravel project using the Laravel Installer:
laravel new project-nameDuring the interactive setup:
- Choose Breeze or Jetstream as the starter kit
- Select Vue with Inertia or React with Inertia as the frontend stack
Once installation is complete, run the final setup commands:
php artisan migrate
npm install && npm run devThis process configures bootstrap/app.php, vite.config.js, Inertia middleware, Tailwind CSS 4, and authentication automatically, saving hours of manual configuration.
3. The Manual Path (Existing Laravel Applications)
When adding Vue.js or React to an existing Laravel application, the integration must be configured manually using Inertia.js and Vite.
A. Server-Side Setup (Laravel)
Install the Inertia Laravel adapter:
composer require inertiajs/inertia-laravelRegister the Inertia middleware in bootstrap/app.php. In Laravel, middleware is no longer registered in Kernel.php.
// bootstrap/app.php
use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Configuration\Middleware;
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})B. Blade Root Template Setup
Create a root layout file (commonly resources/views/app.blade.php) that includes the required Inertia and Vite directives.
The @inertiaHead directive is critical in Inertia 2 for managing SEO metadata such as titles and meta tags. React integrations also require @viteReactRefresh for proper HMR.
<!-- resources/views/app.blade.php -->
<head>
@viteReactRefresh
@vite(['resources/js/app.jsx'])
@inertiaHead
</head>
<body>
@inertia
</body>C. Vite Configuration
Update vite.config.js to include the appropriate frontend framework plugin alongside the Laravel Vite plugin.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
// or: import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.jsx',
refresh: true,
}),
react(),
],
});4. Data Flow Example (Inertia Pattern)
Once integrated, Laravel controllers return frontend components using Inertia::render() instead of traditional Blade views.
Laravel Controller Example
use Inertia\Inertia;
public function index()
{
return Inertia::render('User/Profile', [
'user' => auth()->user(),
'stats' => $this->statsService->get(),
]);
}Vue Component Example
<script setup>
defineProps({
user: Object,
stats: Array,
});
</script>
<template>
<h1>Welcome, {{ user.name }}</h1>
</template>React Component Example
export default function Profile({ user, stats }) {
return <h1>Welcome, {user.name}</h1>;
}Summary
In Laravel, Vue.js and React integration is standardized around Vite, Inertia.js 2, and Tailwind CSS 4. New projects should use Starter Kits like Breeze or Jetstream, while existing applications can be upgraded manually by configuring middleware, Blade directives, and Vite correctly. This approach delivers a modern Monolith SPA experience with minimal complexity and maximum performance.
Related Answers
Was this answer helpful?
Your feedback helps us improve our answers.
Still need help?
Talk to our Laravel experts
We've handled GDPR/CCPA compliance for dozens of EU & US Laravel.