✨📚 Cách dùng các thư viện cũ trong Laravel 13 🛠️

Bạn hoàn toàn có thể dùng AdminLTE trong Laravel 13 với cơ chế @vite , vì hiện nay AdminLTE đã có gói chính thức cho Laravel hỗ trợ Vite-first pipeline.

Điều này giúp bạn vừa tận dụng thư viện cũ, vừa đảm bảo bảo mật, minify và tree-shaking.

🔑 Cách tích hợp AdminLTE với Laravel 13 qua Vite

1. Cài đặt gói chính thức

• Chạy lệnh Composer:

  composer require colorlibhq/adminlte-laravel

• Sau đó chạy artisan installer:

  php artisan adminlte:install

👉 Lệnh này sẽ:

• Xuất file cấu hình config/adminlte.php.

• Tạo stub cho Vite tại resources/js/adminlte.js và resources/css/adminlte.css.

• Cài đặt các dependency frontend (AdminLTE, Bootstrap 5.3, Popper, Icons, ApexCharts, v.v.).

2. Cấu hình Vite

Trong vite.config.js, thêm entry cho AdminLTE:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/adminlte.css',
        'resources/js/adminlte.js',
      ],
      refresh: true,
    }),
  ],
})

👉 Nhờ vậy, khi chạy npm run build, toàn bộ asset sẽ được minify, hash và tree-shake để tăng bảo mật.

3. Tạo trang đầu tiên

Ví dụ resources/views/dashboard.blade.php:

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h3 class="mb-0">Dashboard</h3>
@stop

@section('content')
    <x-adminlte-info-box title="Orders" text="150" icon="bi bi-bag" theme="primary" />
@stop

👉 Các component <x-adminlte-*> được cung cấp sẵn, không cần copy HTML thủ công.

⚠️ Lưu ý bảo mật & hiệu năng

• Luôn dùng Vite build cho production (npm run build) để đảm bảo asset được minify và hash.
• Không nên copy thủ công CSS/JS vào public/ như cách cũ, vì dễ lỗi bảo mật và khó maintain.
• Chỉ bật plugin cần thiết trong config/adminlte.php để giảm dung lượng bundle.
• Kiểm tra bằng lệnh php artisan adminlte:status để biết tài nguyên nào đã được cài đặt.

👉 Nếu bạn muốn giữ nguyên AdminLTE 3 nhưng vẫn dùng @vite, bạn phải tự import thủ công từ npm (admin-lte@^3) và cấu hình entry trong vite.config.js. Tuy nhiên, giải pháp tốt nhất là chuyển sang AdminLTE 4 vì đã có package chính thức cho Laravel 13.

4. Gọi trong Blade

@vite(['resources/css/app.css', 'resources/js/app.js'])

📌 Lưu ý

• Nếu bạn dùng AdminLTE 4, nó đã tích hợp sẵn Bootstrap 5.3, nên không cần cài riêng.
• Nếu bạn muốn tuỳ biến theme, hãy dùng app.scss thay vì app.css để override biến của Bootstrap.
• Khi build production (npm run build), Vite sẽ tự động minify, hash và tree-shake → bảo mật và tối ưu dung lượng.

---

⚙️ Cài đặt Font Awesome

1. Cài qua npm

npm install @fortawesome/fontawesome-free

2. Import vào entry file

Trong resources/js/app.js:

import '@fortawesome/fontawesome-free/js/all.js';

Trong resources/css/app.css (hoặc app.scss):

@import "@fortawesome/fontawesome-free/css/all.min.css";

3. Cấu hình Vite

Trong vite.config.js, đảm bảo đã khai báo:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
})

4. Gọi trong Blade

@vite(['resources/css/app.css', 'resources/js/app.js'])

Sau đó bạn có thể dùng icon:

<i class="fas fa-user"></i>
<i class="fab fa-laravel"></i>

📌 Lưu ý

• Nếu bạn đã cài AdminLTE 4, nó cũng có thể tích hợp sẵn Font Awesome 6, nên không cần cài riêng.
• Nếu muốn dùng chỉ một subset icon để giảm dung lượng, bạn có thể import theo module thay vì toàn bộ all.js.
• Khi build production (npm run build), Vite sẽ tự động minify và hash để tăng bảo mật.