How to Set Up Laravel AdminLTE with ReactJS (Laravel 12 + Vite)

✨ 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 /components and 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!