How to Set Up Laravel AdminLTE with ReactJS (Laravel 12 + Vite)
Kritim Yantra
Jul 05, 2025
✨ Introduction: “Why Can’t I Have the Best of Both Worlds?”
Picture this: You’re developing a new web app. Laravel makes your backend life a breeze — routing, auth, and Eloquent? Love it. 😍
But you also crave that dynamic, lightning-fast frontend that only ReactJS delivers — real-time UI updates, interactive dashboards, seamless UX. Why not combine them?
Guess what? You can — and you should!
In this updated guide, we’ll walk you through setting up Laravel 12, using AdminLTE for the layout, and integrating ReactJS via Vite (Laravel’s modern frontend build tool).
🔧 What We’ll Build
We’ll set up a Laravel + AdminLTE project with React components running inside AdminLTE’s layout.
🧩 Features Covered:
- Laravel 12 setup
- Vite + React configuration
- AdminLTE theme integration
- Embedding React components inside Blade templates
Let’s go! 🏁
🛠️ Step 1: Create a Fresh Laravel 12 App
First, let’s install Laravel:
composer create-project laravel/laravel laravel-adminlte-react
cd laravel-adminlte-react
Start the dev server:
php artisan serve
Visit http://127.0.0.1:8000 and you’re on the right track! ✅
🎨 Step 2: Install AdminLTE Theme
AdminLTE is built on Bootstrap and provides ready-to-use components like sidebars, navbars, charts, etc.
📦 Install via NPM:
npm install admin-lte bootstrap @popperjs/core
💡 Update Your CSS in resources/css/app.css
@import 'admin-lte/dist/css/adminlte.css';
@import 'bootstrap/dist/css/bootstrap.css';
🧠 Update Your JS in resources/js/app.js
import 'bootstrap';
import 'admin-lte';
⚛️ Step 3: Add React with Vite
Laravel 12 uses Vite by default. Here’s how to add React.
📦 Install React & Vite Plugin
npm install react react-dom
npm install --save-dev @vitejs/plugin-react
✏️ Edit vite.config.js
Replace its contents with:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.jsx'],
refresh: true,
}),
react(),
],
});
📝 Rename resources/js/app.js to app.jsx
mv resources/js/app.js resources/js/app.jsx
📁 Step 4: Create a React Component
Let’s make something visible: a card with a button.
📄 resources/js/components/HelloReact.jsx
import React, { useState } from 'react';
export default function HelloReact() {
const [count, setCount] = useState(0);
return (
<div className="card">
<div className="card-header">
<h3 className="card-title">🎉 Hello from React</h3>
</div>
<div className="card-body">
<p>You clicked <strong>{count}</strong> times</p>
<button className="btn btn-primary" onClick={() => setCount(count + 1)}>
Click Me
</button>
</div>
</div>
);
}
📄 Update app.jsx to Load It
import React from 'react';
import ReactDOM from 'react-dom/client';
import HelloReact from './components/HelloReact';
const rootElement = document.getElementById('react-widget');
if (rootElement) {
ReactDOM.createRoot(rootElement).render(<HelloReact />);
}
🧩 Step 5: Embed React in AdminLTE Layout
Use AdminLTE’s HTML structure in your Laravel Blade views.
📄 resources/views/dashboard.blade.php
@extends('layouts.app')
@section('content')
<div class="container mt-5">
<div id="react-widget"></div>
</div>
@endsection
🧠 Tip: Create a layout using AdminLTE's HTML in
resources/views/layouts/app.blade.php, and include@vite(['resources/css/app.css', 'resources/js/app.jsx'])in the<head>or right before</body>.
🚀 Step 6: Run Vite and View It Live
Start the frontend build process:
npm run dev
Now reload the dashboard page — your React component should be working inside your Laravel + AdminLTE layout! 🎉
💡 Bonus Tips
- Use Laravel APIs: Add Axios to your React components for backend calls.
- React Router: Add SPA-like navigation inside a section of your admin panel.
- Split Code: Organize components under
/componentsand group by feature.
📌 Recap: What You’ve Learned
✅ Laravel 12 is now powered by Vite — not Webpack
✅ AdminLTE can be installed via NPM and easily styled
✅ React works beautifully with Laravel using Vite
✅ Blade templates can render React components with no hassle
✅ You're now ready to build full-stack interactive dashboards!
🙋♂️ Let’s Hear From You!
Was this helpful? Did you run into issues? Want a follow-up on adding API calls or Vue instead of React?
👉 Drop a comment below or share this with your dev circle!
Tags
Comments
No comments yet. Be the first to comment!
Please log in to post a comment:
Sign in with GoogleRelated Posts
Kritim Yantra
Kritim Yantra
Kritim Yantra