- How do I integrate AdminLTE with Laravel using Blade templates?
- Use the `adminlte-laravel` package via Composer (`composer require almasaeed2010/adminlte`). It provides Blade directives like `@adminlte` for easy integration. Ensure Bootstrap 5.x is installed via npm (`npm install bootstrap@5`) and configured in your Vite setup. No jQuery is required—AdminLTE now uses vanilla JavaScript.
- Does AdminLTE work with Laravel Vite for frontend asset compilation?
- Yes, AdminLTE is fully compatible with Laravel Vite. Import components directly in your JavaScript files (e.g., `import { PushMenu } from 'admin-lte'`). Configure Vite to resolve Bootstrap 5.x via `vite.config.js` if needed. This replaces Laravel Mix and leverages ESM for modern tooling.
- What Laravel versions does the `adminlte-laravel` package support?
- The `adminlte-laravel` package is designed for Laravel 8.x and 9.x. It maintains backward compatibility with Blade directives, but ensure your project uses PHP 8.0+ for full compatibility. Check the package’s [GitHub repo](https://github.com/ColorlibHQ/AdminLTE) for updates on Laravel 10 support.
- How do I enable dark/light mode persistence in AdminLTE for Laravel apps?
- AdminLTE includes built-in color mode management. Use the `color-mode` API to toggle between themes and persist user preferences via `localStorage`. For Laravel, bind this to a user setting in your database or session. Example: `PushMenu.getInstance().colorMode('dark')` and listen for `changed.lte.color-mode` events.
- Can I use AdminLTE with Inertia.js or Livewire in Laravel?
- Yes, AdminLTE’s component lifecycle API (e.g., `getInstance`, `dispose`) works seamlessly with Inertia.js and Livewire. For Inertia, initialize components in your page’s JavaScript after hydration. For Livewire, use Alpine.js or vanilla JS to trigger AdminLTE events dynamically. Event delegation ensures compatibility with Turbo-driven partial updates.
- What are the risks of migrating from Bootstrap 4 to Bootstrap 5 for AdminLTE?
- AdminLTE now requires Bootstrap 5.x as a peer dependency, which may break custom CSS or SASS variables. Migrate your overrides to Bootstrap 5’s new structure (e.g., `_bootstrap-overrides.scss`). Test thoroughly, as utility classes and JavaScript APIs have changed. Use tools like `npm install bootstrap@5` and update your Vite config.
- How do I handle dynamic content (e.g., AJAX-loaded cards) with AdminLTE?
- AdminLTE’s event system uses delegated listeners for dynamic content. For example, use `document.addEventListener('remove.lte.card-widget', handler)` instead of attaching listeners to tool buttons directly. This works with Laravel’s Turbo/Inertia partials. Ensure your event handlers target the component root (e.g., `.card`) for reliability.
- Are there alternatives to AdminLTE for Laravel admin dashboards?
- Yes, alternatives include **CoreUI** (React-based, Bootstrap 5), **Tabler** (MIT-licensed, Vue/React/Blade), and **Material Dashboard** (jQuery-based). However, AdminLTE stands out for its Laravel-specific Blade integration (`adminlte-laravel`), no-jQuery design, and active community. Evaluate based on your stack (e.g., Inertia vs. Livewire) and customization needs.
- How do I test AdminLTE components in a Laravel CI pipeline?
- Test AdminLTE’s JavaScript components using Jest or Laravel’s built-in testing tools. Mock `document.querySelector` calls to simulate DOM elements. For integration tests, use Laravel Dusk or Pest to verify Blade directives and event listeners. Ensure your CI environment includes npm dependencies (Bootstrap 5.x, AdminLTE) and Vite’s build step.
- What’s the best way to customize AdminLTE’s SCSS variables in Laravel?
- Extend AdminLTE’s SCSS variables by importing `_variables.scss` after the core file in your `resources/scss/app.scss`. Override values like `$primary`, `$sidebar-light`, or `$body-font-family` before importing `adminlte.scss`. Use Vite’s CSS preprocessing to compile the final bundle. Example: `@import 'adminlte/scss/adminlte'; @import 'adminlte/scss/_variables';`