Laravel Adminlte Components Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require dgvai/laravel-adminlte-components
   

   Publish the package assets (Blade components, JS, CSS):

   php artisan vendor:publish --provider="Dgvai\AdminLTEComponents\AdminLTEComponentsServiceProvider" --tag="public"
   

2. Basic Integration Add the AdminLTE facade to your app/Providers/AppServiceProvider.php:

   use Dgvai\AdminLTEComponents\Facades\AdminLTE;
   
   public function boot()
   {
       AdminLTE::withConfig(path_to_your_config);
   }
   

3. First Use Case Render a basic layout in a Blade view:

   @extends('adminlte::page')
   @section('title', 'Dashboard')
   @section('content_header')
       <h1>Dashboard</h1>
   @stop
   @section('content')
       <p>Welcome to your AdminLTE dashboard!</p>
   @stop
   

Implementation Patterns

Core Workflows

1. Layout Customization Override default AdminLTE sections via Blade:

   @push('styles')
       <link rel="stylesheet" href="/custom.css">
   @endpush
   

2. Dynamic Sidebars Use the sidebar component with dynamic menu items:

   @component('adminlte::sidebar')
       @slot('menu')
           @include('partials.sidebar-menu')
       @endslot
   @endcomponent
   

3. Box Components Create reusable content boxes:

   @component('adminlte::box')
       @slot('header')
           <h3 class="box-title">Box Title</h3>
       @endslot
       <p>Box content goes here.</p>
   @endcomponent
   

4. Integration with Laravel Mix Configure AdminLTE assets in webpack.mix.js:

   mix.js('resources/js/adminlte.js', 'public/js')
      .sass('resources/sass/adminlte.scss', 'public/css');
   

Advanced Patterns

• Dynamic Configs Pass runtime configs to AdminLTE:

  AdminLTE::withConfig([
      'template' => 'custom-template',
      'skin' => 'skin-blue',
  ]);
  

• Partial Overrides Override specific components (e.g., navbar, footer) in resources/views/vendor/adminlte/.

• Event Listeners Hook into AdminLTE events (e.g., AdminLTE.Initialized) for post-render logic.

Gotchas and Tips

Common Pitfalls

1. Asset Paths

   • Ensure public_path() is correctly configured if using custom asset paths.
   • Clear cached views after publishing assets:

     php artisan view:clear
     

2. Blade Component Conflicts

   • Prefix custom components to avoid collisions with AdminLTE’s (e.g., @adminlte::box vs @component('adminlte::box')).

3. Deprecated Methods

   • Older versions used AdminLTE::make(); newer versions favor Blade components.

4. AdminLTE Version Mismatch

   • The package targets AdminLTE 2.x. Ensure your package.json and composer.json align:

     "admin-lte": "^2.4.14"
     

Debugging Tips

• Check Published Assets Verify files exist in public/vendor/adminlte/ after publishing.

• Blade Debugging Use @dump to inspect component slots:

  @dump($__env->yieldContent('title'))
  

• CSS/JS Conflicts Disable AdminLTE’s default assets in config/adminlte.php:

  'assets' => [
      'enabled' => false,
  ],
  

Extension Points

1. Custom Components Extend the package by creating new Blade components in resources/views/vendor/adminlte/.

2. Config Overrides Override defaults in config/adminlte.php:

   'template' => 'custom-layout',
   'skin' => 'skin-black',
   

3. JavaScript Hooks Extend AdminLTE’s JS via resources/js/adminlte-extensions.js:

   $.AdminLTE.extend({
       customMethod: function() { /* ... */ }
   });