Install admin lte on laravel vue mix

In this tutorial, we will see how to integrate FontAwesome and laravel 8 + admin lte using npm. Before we start our tutorial, let’s understand some of the terms we will be using in this tutorial.

Installation

composer require laravel/ui
php artisan ui vue
npm install
npm install admin-lte
npm install --save @fortawesome/fontawesome-free

Import admin lte and fontawesome css in public/css/app.css using laravel-mixins

Open: resources\sass\app.scss and paste below code

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// AdminLTE
@import '~admin-lte/dist/css/adminlte.css';

Open: resources\js\bootstrap.js  and put below the line

require('admin-lte');

Open webpack.mix and add below line

.copy('node_modules/admin-lte/dist/img', 'public/dist/img');

Route::get('admin', function () { 
    return view('admin'); 
});

npm run dev && npm run watch
php artisan optimize
php artisan serve