Laravel 7 dan Vue 2.6 — Integrasi AdminLTE3 ke projek Laravel + Vue

6 min readJun 21, 2020

Artikel Sebelumnya :

Laravel 7 dan Vue 2.6 — Integrasi Tailwindcss ke Laravel + Vue

Di artikel kali ini kita akan mencoba membuat projek fresh baru, kita tidak akan melanjutkan artikel sebelumnya okai. Bagi kalian yang masih awam dengan vuejs dan laravel, saya sarankan melihat artikel sebelumnya yang sudah saya buat.

Link Artikel :
#1 — Laravel 7 + Vue 2.6 — Instalasi dan Membuat Projek Laravel dan Vue
#2 — Laravel 7 + Vue 2.6 — Menggunakan Vue Router untuk Web SPA (Singgle Page Application)
#3 — Laravel 7 dan Vue 2.6 — Integrasi Tailwindcss ke Laravel + Vue

Membuat Projek Laravel Baru

Mari kita buat projek fresh laravel, berikut perintahnya menggunakan composer :

composer create-project --prefer-dist laravel/laravel laravue-adminlte3

Disini saya membuat nama projek baru ini dengan “laravue-adminlte3”. Tunggu sampai proses generate scafollding ini selesai.

Setelah Selesai, mari sekarang kita masuk ke folder Laravel kita menggunakan perintah cd :

cd laravue-adminlte3

Memasang Package Laravel UI

Kenapa kita menggunakan package ini? karena di laravel 7 semua bagian ui dari laravel terpisah dan di buatkan sebuah package baru yang bernama laravel ui.

Kita membutuhkan ini untuk membuat preset vue js kita kedalam laravel, sebenarnya kita bisa lakukan secara manual. Tapi kalau ada yang mudah kenapa yang susah ? ehehe

composer require laravel/ui

Dan Tunggu sampai selesai teman teman, dan berikut output perintahketika sudah selesai memasang package laravel/ui :

Selanjutnya, kita generate vue scafollding dengan laravel/ui ini, menggunakan perintah simpel berikut :

php artisan ui vue

Tara.. scafollding sudah berhasil di generate!! Kalau kalian bingung apa yang dilakukan oleh laravel/ui ini, jadi dia mengenerate preset untuk package.json kita agar bisa kita npm install , dan juga dia menggenerate main.js yang ada di folder resources/js/ dan mengenerate base css kita di resources/sass/app.scss

Memasang AdminLTE3

pertama kita pasang dulu adminlte3 dengan npm atau yarn :

npm install admin-lte@^3.0 --save

atau

yarn add admin-lte@^3.0

Tunggu sampai selesai, dan berikut hasilnya :

Mengintegrasikan AdminLTE3 ke Vue

pertama — tama, pastikan kalian punya file fie sepert berikut :

Selanjutnya, edit file resources/js/bootstrap.js , ini ad file hasil dari scafollding larave itu sendri, cari sebuah kode seperti berikut :

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

Lalu ubah menjadi :

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    require('overlayscrollbars');
    require('admin-lte');
} catch (e) {}

Oke, jadi disini kita meng import script dari sih admin-lte, juga overlayscrollbar untuk scroll sidebar yang ada di adminLTE nanti.

Selanjutnya, kita edit main script vue kita di resources/js/app.js , ganti semua scriptnya menjadi :

import './bootstrap'
import Vue from 'vue'
import App from './layouts/App.vue'new Vue({
  el: '#app',
  render: h => h(App)
})

harusnya Sudah paham, ini konigurasi dasar vuejs saja. dimana kita membuat instance vue baru, lalu kita definisikan root elemen kita ke #app dan kita merender default template bernama App yang mana kita import dari resources/js/layouts/App.vue

Selanjutnya kita load dulu css dari adminlte nya, edit resources/sass/app.scss menjadi :

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

Selanjutnya, kita buat Layouts dari AdminLTE kita, edit file resources/js/layouts/App.vue :

<template>
  <div class="wrapper">
    <Navbar />
    <Sidebar />    <div class="content-wrapper">
      <h1>AdminLTE 3 Test !</h1>
    </div>
    <Footer />
  </div>
</template><script>
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import Sidebar from '../components/Sidebar'export default {
  components: { Navbar, Footer, Sidebar },
  mounted() {
    window.$('body').Layout();
    window.$('[data-widget="pushmenu"]').PushMenu();
    window.$('[data-widget="control-sidebar"]').ControlSidebar();
    window.$('ul[data-widget="treeview"]').Treeview('init');
    window.$('.dropdown').Dropdown();
    window.$('ul[data-widget="treeview"]').overlayScrollbars();
  }
}
</script>

Disini kita membagi adminlte3 menjadi partial, yaitu Navbar, Sidebar, dan Footer. Agar lebih rapi tentunya.

Content kalian nanti bisa kalian isi di bagian content-wrapper , untuk lebih bagusnya lagi nanti kalian bisa mengguakan vue-router untuk membuatnya dan router-view nya kalian definisikan didalam content-wrapper tersebut.

Lalu kita gunakan liecylce mounted() ini melakukan init terhadap adminlte3 componentnya, karena beberapa component adminlte3 perlu di init sepeti dropdown, body, overlayscrollbar, dll.

Selanjutnya kita edit Navbar, edit file resources/js/components/Navbar.vue :

<template>
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#">
          <i class="fas fa-bars"></i>
        </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">
          Menu Item
        </a>
      </li>
    </ul>
  </nav>
</template>

Lalu edit Footer, di resources/js/components/Footer.vue :

<template>
  <footer class="main-footer">
    <div class="float-right d-none d-sm-inline">
      AdminLTE 3.0.5
    </div>
    <strong>
      Copyright &copy; 2020
      <a href="">Alfian Dwi Nugraha</a>.
    </strong> All rights reserved.
   </footer>
</template>

Lalu terakhir, jangan lua edit juga Sidebar , ada di resources/js/components/Sidebar.vue

<template>
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <a href="#" class="brand-link">
            <img
             src="https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
              alt="Logo" class="brand-image elevation-3"
              style="opacity: .8"
              >
            <span class="brand-text font-weight-light">AdminLTE3</span>
        </a>
        <div class="sidebar">
            <nav class="mt-2">
                <ul
                  class="nav nav-pills nav-sidebar flex-column"
                  data-widget="treeview" role="menu"
                  data-accordion="false"
                  >
                    <li class="nav-item">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fas fa-home"></i>
                            <p>Home</p>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </aside>
</template>

Membuat Blade dan mengalihkan Request Laravel

arahkan semua request dari laravel ke vuejs, agar route dipegang penuh oleh vue-router juga.

Edit routes/web.php :

Route::get('/{any}', function () {
    return view('layouts.vue');
})->where('any', '.*');

Fungsi diatas, kita membuat sebuah route point, dimana parameter {any} akan kita beri regex pattern. Fungsinya agar semua request route akan diarahkan ke satu template yaitu view layouts.vue .

Sekarang kita buat view file nya untuk me load vuejs dan tailwind kita, buat file resources/views/layouts/vue.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel - Vuejs - AdminLTE3</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  </head>
  <body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>