Laravel 13 - How To Integrate AdminLte For Stunning Dashboard.
Laravel 13 - How To Integrate AdminLte For Stunning Dashboard.
In this tutorial, we will learn how to integrate AdminLTE with Laravel 13, set up authentication, create a reusable master layout, customize the dashboard, and add sidebar navigation with custom pages.
Quick Overview
This guide walks you through integrating the AdminLTE theme into a Laravel 13 project. It begins by creating a fresh Laravel application and installing the AdminLTE package. After publishing the required assets and configuration files, authentication scaffolding is added using Laravel UI, and the default authentication pages are replaced with AdminLTE-styled views. The guide then removes conditional Vite asset loading from the welcome page, runs the application, and verifies the registration flow. Next, a reusable master layout is created to manage shared page elements, followed by customizing the dashboard and creating a Posts page. Finally, the Posts link is added to the AdminLTE sidebar, its route is configured, and the default AdminLTE title is updated to complete the integration.
Step # 1 : Create a Fresh Laravel Application.
Begin by preparing a new Laravel 13 application named adminlte. To create the project, we'll use the Laravel Installer, which provides a straightforward way to initialize a Laravel application. Before proceeding, ensure that Composer is installed and working on your system. If you haven't installed the Laravel Installer yet, run the following Composer command to make it available globally.
composer global require laravel/installer
Once the installation is finished, use the Laravel Installer to generate your application.
laravel new adminlte
Laravel will guide you through several setup questions while creating the project. Choose the following options to keep the application lightweight and prepare it for a manual AdminLTE installation.
- Starter Kit: Select None to avoid installing pre-configured authentication or starter scaffolding, as AdminLTE will be integrated separately.
- Frontend Stack: Choose Blade to use Laravel's native templating engine for rendering views.
- Boost Features: Accept the default selection by pressing Enter.
- Boost Integrations: Keep the default settings and press Enter to continue.
- AI Agents: Select Amp when prompted. Laravel will add the associated Amp configuration to the project.
Once the installation is complete, your Laravel 13 application will be available in the adminlte directory with the selected configuration.
Step # 2 : Access Your Laravel Project Directory.
Once the Laravel application has been created, open your preferred terminal, such as PowerShell, Command Prompt, Git Bash, or the integrated terminal in VS Code. Navigate to the project directory by running the following command.
cd adminlte
This command moves you into the adminlte folder, where your Laravel 13 application is located. From here, you can run Artisan commands, manage Composer dependencies, and perform other project-related tasks.
Step # 3 : Install the AdminLTE Package.
With your Laravel 13 project in place, you can add AdminLTE using Composer. Run the following command from your project directory.
composer require jeroennoten/laravel-adminlte
Composer will download and install the jeroennoten/laravel-adminlte package along with its required dependencies, making the AdminLTE integration available within your Laravel application.
Step # 4 : Publish AdminLTE Assets and Configuration.
Once the AdminLTE package has been installed, execute the following Artisan command to initialize its files within your Laravel application.
php artisan adminlte:install
This command publishes the AdminLTE resources required by your project, including its assets, configuration, and translation files. When the process completes successfully, a confirmation message will appear, and the config/adminlte.php file will be available for adjusting the theme's settings.
Step # 5 : Configure Authentication Using Laravel UI and AdminLTE.
To add authentication functionality to your Laravel application, start by installing Laravel UI and generating the Bootstrap-based authentication scaffolding. Run the following commands from your project directory.
composer require laravel/ui
php artisan ui bootstrap --auth
During scaffolding, if Laravel displays a prompt asking whether to replace the existing Controller.
The [Controller.php] file already exists. Do you want to replace it?
Select Yes to proceed. Once the authentication files have been generated, install the required frontend dependencies and compile the assets by running.
npm install && npm run dev
After the frontend compilation is complete, update the authentication pages to use AdminLTE's interface. Open another terminal, navigate to your Laravel project directory, and execute this command.
php artisan adminlte:install --only=auth_views
This command replaces the default authentication views with AdminLTE-styled template, giving pages such as login, registration, and password reset a consistent admin panel design.
Step # 6 : Remove Vite Asset Loading from the Welcome Page.
Laravel's default welcome.blade.php includes a conditional block that loads Vite assets when the build manifest or hot file exists. Otherwise, it falls back to the inline styles provided in the template. These styles can interfere with the page layout when setting up AdminLTE. To avoid this, open resources/views/welcome.blade.php and locate the following section.
<!-- 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, @vite, and @endif lines while keeping the entire <style> block and its existing CSS intact. The resulting section should look like this.
<!-- Styles / Scripts -->
<style>
/* Tailwind CSS styles here */
</style>
Save the file once you've made these changes. This removes the conditional Vite asset loading from the welcome view while preserving its inline CSS, helping prevent conflicts with the default page styling during AdminLTE setup.
Step # 7 : Run the Laravel Application.
Let's verify that your Laravel application is running correctly. Start the local development server by executing the following command in your project terminal.
php artisan serve
Once the server starts, visit the registration page in your browser at http://127.0.0.1:8000/register. Fill in the required details and submit the form to register a new user.
After the registration is successful, Laravel will redirect you to the default dashboard, where you can confirm that your account has been created and the authentication flow is working.
Step # 8 : Set Up a Master Layout with AdminLTE.
To make the layout reusable across multiple pages and avoid duplicating common code, we’ll create a master layout that extends the AdminLTE theme. Create a file named master.blade.php inside resources/views/layouts and add the following code.
@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 master layout contains reusable sections for the browser title, content header, footer, custom CSS, and JavaScript, allowing these elements to be shared across different pages.
Next, open resources/views/home.blade.php and replace its existing code with the following to extend the AdminLTE master layout on the dashboard page.
@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 configures the dashboard subtitle and content header, shows a welcome message, and provides sections for additional stylesheets and scripts. Save the file to view the AdminLTE dashboard.
The AdminLTE sidebar contains links such as Pages, Profile, and Change Password, which need corresponding routes in your Laravel application to work correctly. To demonstrate how to add a functional sidebar link, we’ll use Posts as an example. Create a Blade file named posts.blade.php at resources/views/posts.blade.php and add the following code.
@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 view defines the Posts page title and header, displays a message in the main content area, and includes sections where you can add custom stylesheets or scripts when needed.
To display the Posts link in the sidebar, open config/adminlte.php and find the sidebar menu items section. Add the following Posts entry alongside the existing menu items.
[
'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 configuration adds a Posts link to the sidebar, specifies its destination and icon, and sets the label color to success.
Now, add a route for the Posts page in routes/web.php using the following code.
Route::get('admin/posts', function () {
return view('posts');
});
You can now visit the Posts page through its configured route.
To change the default AdminLTE title, open config/adminlte.php and update the following configuration values.
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 want to display.
Conclusion
By following this guide, you have successfully integrated the AdminLTE theme into your Laravel 13 project, creating a responsive and customizable admin panel. You have configured authentication views, created a reusable master layout, customized the dashboard, and added a Posts page with sidebar navigation and routing. AdminLTE provides ready-made components and styling that help simplify dashboard development while allowing you to customize the interface according to your application's requirements. This setup provides a solid foundation for extending your admin panel with additional pages and features as your project grows.
For more information, refer to the official AdminLTE documentation: https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Usage.
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