Laravel 12 - How To Integrate AdminLte For Stunning Dashboard
Laravel 12 - How To Integrate AdminLte For Stunning Dashboard
In this tutorial, we will learn how to combine Laravel 12 with AdminLTE to build a modern, professional admin dashboard in minutes.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through integrating the AdminLTE theme into a Laravel 12 project. It begins by setting up a new Laravel application and installing the AdminLTE package. After publishing the necessary assets and configuration files, authentication scaffolding is added using Laravel UI. The default authentication pages are then replaced with AdminLTE styled versions to match the admin layout. A custom Blade layout is created to apply the AdminLTE design to the dashboard, and sidebar links such as a Posts page configured through the AdminLTE settings. Finally, routes and views for the dashboard and Posts page are added, and the project is launched to view the AdminLTE theme seamlessly integrated into the Laravel 12 dashboard.
Step # 1 : Set Up a New Laravel Project.
Let’s start by creating a fresh Laravel application named adminlte. If you have the Laravel Installer available globally, run.
laravel new adminlte
If not, you can create the project directly using Composer.
composer create-project laravel/laravel --prefer-dist adminlte
The Composer command simply installs the latest Laravel framework and its dependencies in a new adminlte directory. When using the Laravel Installer, you’ll be guided through a few setup prompts.
- For the Starter Kit, choose None, since we’ll be setting up AdminLTE manually.
- When asked for the Testing Framework, select Pest.
- For the Database, choose MySQL as your preferred option.
- When prompted to run the default migrations, confirm with Yes to create the initial tables.
- Finally, allow it to run npm install and npm run build so your frontend dependencies are installed and compiled.
Once the setup is complete, you’ll have a clean Laravel project ready to integrate with AdminLTE.
Step # 2 : Navigate to Your Laravel Project.
After the installation finishes, open your terminal (for example, Git Bash, Command Prompt, or the VS Code Terminal) and move into your project’s root directory.
cd c:xampp/htdocs/adminlte
This command fetches and installs all necessary dependencies, integrating AdminLTE into your Laravel application as the base admin dashboard.
Step # 3 : Integrate AdminLTE into Your Project
Now that your Laravel setup is ready, install the AdminLTE package via Composer by running.
composer require jeroennoten/laravel-adminlte
This pulls in the necessary files, setting up AdminLTE as your admin panel.
Step # 4 : Configure and Publish AdminLTE.
After installing the package, run the following Artisan command to set up the theme.
php artisan adminlte:install
This command publishes all necessary AdminLTE assets, configuration files, and translation files. After it finishes, you’ll see a message confirming that the installation is complete, and the config/adminlte.php file will be available for further customization.
Step # 5 : Set Up Authentication with Laravel UI and AdminLTE.
First, install Laravel UI and generate the Bootstrap authentication scaffolding by running.
composer require laravel/ui
php artisan ui bootstrap --auth
If prompted with.
The [Controller.php] file already exists. Do you want to replace it?
Select Yes to proceed. Next, compile the frontend assets.
npm install && npm run dev
Finally, to replace the default authentication views with AdminLTE’s styled versions, open another instance of Git Bash or the terminal you are using, navigate to your project directory, and run.
php artisan adminlte:install --only=auth_views
This will apply AdminLTE styling to all authentication pages, including login, registration, and password reset forms.
Step # 6 : Remove the conditional check in welcome.blade.php.
Open resources/views/welcome.blade.php and find the block.
<!-- Styles / Scripts -->
@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
@vite(['resources/css/app.css', 'resources/js/app.js'])
@else
<style>
/* Tailwind CSS styles here */
</style>
@endif
Remove the @if line, the @vite line, and the @endif line, keeping only the <style> block along with all the CSS inside it.
<!-- Styles / Scripts -->
<style>
/* Tailwind CSS styles here */
</style>
After making the changes, save the file. Your welcome page will now load the default styles directly, without any conditional checks for Vite or build files.
Step # 7 : Let's run the project.
Start the development server by running.
php artisan serve
Now, access the Register page at (http://127.0.0.1:8000/register) and create a user.
Once the user is created, you'll be redirected to the default dashboard page.
Step # 8 : Create a Master layout using the AdminLTE Theme.
Create a new file named master.blade.php in the resources/views/layouts folder (path: resources/views/layouts/master.blade.php) and use the following code to set up your layout.
@extends('adminlte::page')
{{-- Extend and customize the browser title --}}
@section('title')
{{ config('adminlte.title') }}
@hasSection('subtitle') | @yield('subtitle') @endif
@stop
{{-- Extend and customize the page content header --}}
@section('content_header')
@hasSection('content_header_title')
<h1 class="text-muted">
@yield('content_header_title')
@hasSection('content_header_subtitle')
<small class="text-dark">
<i class="fas fa-xs fa-angle-right text-muted"></i>
@yield('content_header_subtitle')
</small>
@endif
</h1>
@endif
@stop
{{-- Rename section content to content_body --}}
@section('content')
@yield('content_body')
@stop
{{-- Create a common footer --}}
@section('footer')
<div class="float-right">
Version: {{ config('app.version', '1.0.0') }}
</div>
<strong>
<a href="{{ config('app.company_url', '#') }}">
{{ config('app.company_name', 'My company') }}
</a>
</strong>
@stop
{{-- Add common Javascript/Jquery code --}}
@push('js')
<script>
$(document).ready(function() {
// Add your common script logic here...
});
</script>
@endpush
{{-- Add common CSS customizations --}}
@push('css')
<style type="text/css">
{{-- You can add AdminLTE customizations here --}}
/*
.card-header {
border-bottom: none;
}
.card-title {
font-weight: 600;
}
*/
</style>
@endpush
This layout provides a customizable page title and header, a common footer displaying version and company details, and sections for adding custom JavaScript and CSS modifications.
To use the AdminLTE theme, update the home.blade.php file with the following code.
@extends('layouts.master')
{{-- Customize layout sections --}}
@section('subtitle', 'Dashboard')
@section('content_header_title', 'Dashboard')
@section('content_header_subtitle', 'Welcome')
{{-- Content body: main page content --}}
@section('content_body')
<p>Code Shotcut, Welcome to this beautiful admin panel.</p>
@stop
{{-- Push extra CSS --}}
@push('css')
{{-- Add here extra stylesheets --}}
{{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@endpush
{{-- Push extra scripts --}}
@push('js')
<script> console.log("Hi, We are using the Laravel-AdminLTE package!"); </script>
@endpush
This code sets the subtitle and content header for the dashboard page, displays a welcome message in the main content body, and allows you to add extra custom stylesheets and scripts. Now, you will be able to see the AdminLTE theme in action.
The sidebar links in the AdminLTE panel, such as Pages, Profile, or Change Password, require corresponding routes in your Laravel application. To demonstrate how to define and make these links functional, let’s create a new link for Posts as an example. Create a Blade file named posts.blade.php and update it as shown below. Save it in the path: resources/views/posts.blade.php.
@extends('layouts.master')
{{-- Customize layout sections --}}
@section('subtitle', 'Posts')
@section('content_header_title', 'Posts')
@section('content_header_subtitle', 'Manage your blog posts')
{{-- Content body: main page content --}}
@section('content_body')
<p>Here you can view, create, and manage all your blog posts.</p>
@stop
{{-- Push extra CSS --}}
@push('css')
{{-- Add here extra stylesheets --}}
@endpush
{{-- Push extra scripts --}}
@push('js')
<script> console.log("Posts page loaded successfully!"); </script>
@endpush
This file sets the title and content header for the Posts page, displays a message in the content body, and allows adding extra stylesheets and scripts if needed.
To add the Posts link to the sidebar, access the adminlte.php configuration file located at config/adminlte.php. Then, go to the menu sidebar items section and add the following details for the posts.
[
'text' => 'pages',
'url' => 'admin/pages',
'icon' => 'far fa-fw fa-file',
'label' => 4,
'label_color' => 'success',
],
//Add Posts details.
[
'text' => 'Posts',
'url' => 'admin/posts',
'icon' => 'far fa-fw fa-file',
'label_color' => 'success',
],
This will add a new Posts link to the sidebar, set the icon and URL for the Posts page, and apply a success color to the label.
Now create a route for the Posts page by adding the following code.
Route::get('admin/posts', function () {
return view('posts');
});
Now, you should be able to access the Posts page.
Access the adminlte.php configuration file located at config/adminlte.php to modify the title. Change the following.
From
'title' => 'AdminLTE 3',
'title_prefix' => '',
'title_postfix' => '',
To
'title' => 'Code Shotcut',
'title_prefix' => '',
'title_postfix' => '',
You can replace Code Shotcut with any title you prefer.
Conclusion
By following this guide, you have successfully integrated the AdminLTE theme into your Laravel 12 project, creating a sleek and responsive admin panel. The integration provides customizable layouts, sidebar navigation, and authentication views styled with AdminLTE, enhancing both the design and functionality of your application. AdminLTE’s pre-built components and styles simplify the creation of a user-friendly interface, while its flexibility allows you to tailor the dashboard to your project’s needs. This setup not only improves the overall user experience but also prepares your application for future updates and enhancements.
For more details, refer to the official AdminLTE documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments