Adminlte Laravel Package

Getting Started

Minimal Setup for Laravel

1. Install the Laravel-specific package:

   composer require colorlibhq/adminlte-laravel
   

2. Publish assets and config:

   php artisan vendor:publish --provider="ColorlibHQ\AdminLTE\AdminLTEServiceProvider" --tag="adminlte-assets"
   php artisan vendor:publish --provider="ColorlibHQ\AdminLTE\AdminLTEServiceProvider" --tag="adminlte-config"
   

3. Add the AdminLTE Blade directive to your app/Providers/AppServiceProvider.php:

   use ColorlibHQ\AdminLTE\AdminLTE;
   
   public function boot()
   {
       AdminLTE::init();
   }
   

4. Use the default layout in your Blade views:

   @extends('adminlte::page')
   @section('title', 'Dashboard')
   @section('content_header')
       <h1>Dashboard</h1>
   @stop
   @section('content')
       <p>Your content here.</p>
   @stop
   @section('css')
       <link rel="stylesheet" href="/css/admin_custom.css">
   @stop
   @section('js')
       <script>console.log('Hi!');</script>
   @stop
   

First Use Case: Quick Dashboard

Replace your resources/views/dashboard.blade.php with:

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
    <small>Control panel</small>
@stop

@section('content')
    <div class="row">
        <div class="col-lg-3 col-6">
            <!-- Small box -->
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>150</h3>
                    <p>New Orders</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
@stop

Implementation Patterns

1. Dynamic Menu Generation

Use the menu() helper to generate a sidebar menu from your database or config:

// config/adminlte.php
'menu' => [
    [
        'text' => 'Dashboard',
        'url'  => 'home',
        'icon' => 'fas fa-tachometer-alt',
    ],
    [
        'text' => 'Users',
        'url'  => 'users',
        'icon' => 'fas fa-users',
        'submenu' => [
            ['text' => 'List', 'url' => 'users/list'],
            ['text' => 'Create', 'url' => 'users/create'],
        ],
    ],
],

Render it in your layout:

@include('adminlte::menu')

2. Authentication Integration

Leverage Laravel's built-in auth with AdminLTE's layout:

// routes/web.php
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Use the @auth directive in Blade:

@auth
    @include('adminlte::menu')
@endauth

3. Widget Integration

Add widgets to the dashboard using AdminLTE's box components:

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Quick Example</h3>
            </div>
            <div class="card-body">
                <p>Widget content here.</p>
            </div>
        </div>
    </div>
</div>

4. Dark Mode Toggle

Enable dark mode via config:

// config/adminlte.php
'dark_mode' => true,

Or toggle dynamically in Blade:

<button onclick="document.body.setAttribute('data-bs-theme', 'dark')">Dark Mode</button>

5. Customizing Layout Components

Override default components by publishing and modifying:

php artisan vendor:publish --tag=adminlte-views

Edit files in resources/views/vendor/adminlte/.

Gotchas and Tips

1. Class Name Changes (v3 → v4)

• Old: .wrapper, .main-header
• New: .app-wrapper, .app-header Fix: Update your CSS/JS selectors or use AdminLTE's built-in helpers.

2. jQuery Dependency Removal

AdminLTE v4 uses vanilla JS. If you rely on jQuery plugins:

• Replace with vanilla alternatives (e.g., data-lte-toggle instead of data-toggle).
• Use Bootstrap 5's native JS (e.g., data-bs-toggle).

3. Dark Mode Implementation

• Bootstrap 5.3+: Uses data-bs-theme="dark" (not .dark-mode class).
• AdminLTE Config: Set 'dark_mode' => true in config/adminlte.php.
• Dynamic Toggle: Use JavaScript to switch themes:

  document.body.setAttribute('data-bs-theme', 'dark');
  

4. Menu Active State

Manually set active states in the menu config:

'menu' => [
    [
        'text' => 'Dashboard',
        'url'  => 'home',
        'icon' => 'fas fa-tachometer-alt',
        'active' => request()->is('home'),
    ],
],

5. Asset Loading

• CDN: Use {{ AdminLTE::css() }} and {{ AdminLTE::js() }} in Blade.
• Local: Ensure assets are published to public/vendor/adminlte/.

6. Debugging Layout Issues

• Clear Cache: Run php artisan view:clear if layouts break after updates.
• Inspect Elements: Use browser dev tools to verify classes (e.g., .app-wrapper).
• Check Config: Validate config/adminlte.php for typos in paths or options.

7. Extending with Custom Components

Create a new Blade component in resources/views/components/adminlte/:

<!-- resources/views/components/adminlte/custom-card.blade.php -->
<div class="card">
    <div class="card-header">{{ $title }}</div>
    <div class="card-body">{{ $slot }}</div>
</div>

Use it in views:

<x-adminlte.custom-card title="Custom Title">
    <p>Custom content.</p>
</x-adminlte.custom-card>

8. Performance Tips

• Disable Demos: Only deploy dist/ assets to production.
• Lazy Load: Use {{ AdminLTE::js(['adminlte.js', 'custom.js'], true) }} for lazy loading.
• Minify: Run npm run production in the AdminLTE repo to generate minified assets.

9. Common Pitfalls

10. Pro Tips

• Use AdminLTE::title() for dynamic page titles:

  @section('title', AdminLTE::title())
  

• Leverage AdminLTE::breadcrumb() for navigation trails:

  @include('adminlte::breadcrumb', ['links' => [
      ['url' => 'home', 'text' => 'Home'],
      ['text' => 'Users'],
  ]])
  

• Customize the Footer:

  @section('footer')
      <strong>Copyright &copy; {{ date('Y') }} <a href="#">Your Company</a>.</strong>
      All rights reserved.
  @stop