Laravel Adminlte Components Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require maxyc/laravel-adminlte-components
   

   Publish the package's assets (optional, for customization):

   php artisan vendor:publish --provider="Maxyc\AdminLteComponents\AdminLteComponentsServiceProvider"
   

2. First Use Case: Include the base layout in your resources/views/layouts/app.blade.php:

   @extends('adminlte::page')
   @section('title', 'Dashboard')
   @section('content_header')
       <h1>Dashboard</h1>
   @stop
   @section('content')
       <p>Welcome to your AdminLTE dashboard!</p>
   @stop
   @section('css')
       <!-- Add custom CSS here -->
   @stop
   @section('js')
       <!-- Add custom JS here -->
   @stop
   

3. Key Files:

   • Review resources/views/vendor/adminlte/ for all available components.
   • Start with page.blade.php (base layout) and partials/ (reusable sections like sidebar, navbar).

Implementation Patterns

Core Workflows

1. Layout Structure:

   • Use @extends('adminlte::page') as the root template.
   • Define sections with @section('title'), @section('content_header'), etc.
   • Override default sections (e.g., @section('sidebar')) to customize the sidebar.

2. Reusable Components:

   • Boxes: Create data cards with @component('adminlte::box').

     @component('adminlte::box', ['title' => 'Quick Example'])
         <p>Box content here.</p>
     @endcomponent
     

   • Widgets: Use @component('adminlte::widget') for smaller, interactive elements.
   • Forms: Leverage @component('adminlte::form') with built-in validation helpers.

3. Dynamic Content:

   • Pass data to components via attributes:

     @component('adminlte::box', [
         'title' => 'Dynamic Title',
         'icon' => 'fa fa-cog',
         'bodyClass' => 'bg-gray-light'
     ])
     

   • Use @slot('footer') for component-specific footers (e.g., in boxes).

4. Integration with Laravel:

   • Auth: Use @auth directives with AdminLTE’s built-in auth components (e.g., @component('adminlte::auth.login')).
   • Routes: Pair with Laravel’s route model binding for dynamic content:

     @component('adminlte::box', ['title' => $post->title])
         {{ $post->body }}
     @endcomponent
     

5. Theming:

   • Override default colors/skins via config (config/adminlte.php):

     'skin' => 'blue', // Options: 'skin-blue', 'skin-black', etc.
     'sidebarCollapse' => true,
     

   • Extend CSS/JS by defining @section('css') and @section('js') in your layout.

Gotchas and Tips

Pitfalls

1. Component Naming:

   • Components are case-sensitive (e.g., adminlte::box vs. adminlte::Box).
   • Always check the published views for exact names.

2. Asset Loading:

   • AdminLTE’s CSS/JS are not auto-loaded. Ensure you include them in your layout:

     @section('html_header')
         @include('adminlte::partials.head-top')
     @stop
     

3. Laravel 8+ Compatibility:

   • The package is designed for Laravel 8+, but Blade components must be registered in AppServiceProvider:

     public function boot()
     {
         $this->loadViewsFrom(__DIR__.'/../vendor/adminlte', 'adminlte');
     }
     

4. Dynamic Sidebars:

   • If using a dynamic sidebar (e.g., multi-level menus), manually render @section('sidebar'):

     @section('sidebar')
         @include('adminlte::partials.sidebar', ['menuItems' => $menuItems])
     @stop
     

Debugging Tips

1. Missing Components:

   • Verify the component exists in vendor/maxyc/adminlte-components/resources/views/.
   • Check for typos in the @component directive.

2. Styling Issues:

   • Override AdminLTE’s default styles by targeting .skin-* classes in your custom CSS.
   • Use browser dev tools to inspect elements and identify conflicting classes.

3. Configuration Overrides:

   • Published config (config/adminlte.php) takes precedence over defaults. Clear cached config after changes:

     php artisan config:clear
     

Extension Points

1. Custom Components:

   • Extend existing components by copying them from vendor/ to resources/views/vendor/adminlte/ and modifying.

2. Plugin Integration:

   • Integrate with Laravel packages like spatie/laravel-permission by extending the sidebar:

     @section('sidebar')
         @include('adminlte::partials.sidebar')
         @include('adminlte::partials.sidebar-menu', ['permissions' => auth()->user()->getAllPermissions()])
     @stop
     

3. Localization:

   • Override AdminLTE’s static text (e.g., "Logout") by publishing and modifying language files:

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