Laravel 7 + AdminLTE3 + VUE with Free Icon-pack
1This tutorial will demonstrate how to install a fresh Laravel project and how to include AdminLTE and Vue in it. The versions of these
components are the latest preferred versions as of the current date which is July 5 2020. This video will not cover how to install Laravel,
and assumes that you already know how to do that. If not, go ahead and look for tutorials on how to install that. You will need Composer and NodeJS
installed before following this tutorial, otherwise the composer and npm commands will not work.
We'll start off by creating our sample project folder, let's name it "SampleImplementation".
1) Create a folder named SampleImplementation.
2) Open Command Prompt in Administrator Mode
3) Navigate to the directory of our created folder.
4) Type in "composer create-project laravel/laravel SampleImplementation --prefer-dist" without the quotes to create our laravel project files.
5) Navigate to the newly created laravel project folder by typing "cd SampleImplementation".
6) Type in "composer require laravel/ui --dev" to install the authentication feature package which usually requires the latest version of Laravel.
7) Type in "php artisan ui vue --auth" to install the bootstrap and vue components.
8) Open your Code Editor, I use Visual Studio Code because it is free but you can use whatever you prefer. Open the laravel project folder in the editor.
9) Inside the database folder, make a new file and name it database.sqlite and leave that file empty. You can use a different Database Server if you prefer.
10) Open the .env file and edit the APP_Name property, use quotation marks if you will use a whitespace character. (Optional)
11) In the .env file, configure the Database Settings. Always save the files for every change you want to commit.
12) Go back to the Command Prompt and type in "php artisan migrate".
13) Next, type in "npm install" in the Command Prompt.
14) Type in "npm install admin-lte --save" and press Enter.
15) Type in "npm i @fortawesome/fontawesome-free" and press Enter to install the free iconpack. You can use a different one if you want to.
16) Type in "npm i icheck-bootstrap" and press Enter.
17) Type in "npm i overlayscrollbars" and press Enter.
18) Now open your browser and navigate to the AdminLTE preview website: adminlte.io/themes/v3/ to view the source code of a sample starter page and copy.
Starter page can be found at the Sidebar/Extras/Starter Page.
19) Go back to the code editor with the project folder open. Create a new file named master.blade.php in resources/views/layouts and paste the copied code.
20) Edit the master.blade.php file like shown in the video at 20:33.
21) Edit the home.blade.php file in views folder. Replace @extends('layouts.app') with @extends('layouts.master')
22) Now, add the following to your bootstrap.js file after window.$ = window.jQuery = require('jquery'); in resources/js folder.
require('overlayscrollbars');
require('admin-lte');
23) Also, replace your app.scss content in the resources/sass folder by the following:
// Fonts
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic');
@import '~@fortawesome/fontawesome-free/css/all.css';
// OverlayScrollbars
@import '~overlayscrollbars/css/OverlayScrollbars.css';
// iCheck
@import '~icheck-bootstrap/icheck-bootstrap.css';
// AdminLTE
@import '~admin-lte/dist/css/adminlte.css';
// Bootstrap
// Already imported by AdminLTE
//@import '~bootstrap/scss/bootstrap';
24) Go back to command prompt and input "npm run dev", press Enter. There should be no errors. Then type "php artisan serve" to view your website.
View the website in your browser at localhost:8000