Membuat Blog dengan Laravel & VueJS - #4 | Menu Admin

Sebelumnya kita sudah berhasil membuat sebuah komponen untuk halaman dashboard. Selanjutnya kita akan buat kembali sebuah komponen untuk menu admin.

Langsung saja, silahkan ikuti langkah-langkah dibawah ini:

Mari kita buat file baru di direktori resources/js/components  dengan nama Menuadmin.vue.

Kemudian silahkan copy dan paste template dibawah ini:

//Menuadmin.vue
<template>
<div>
  <div class="menu">
    <ul> 
      <li>
        <router-link :to="{ name: 'dashboard'}">
          <i class="fa fa-home"></i>
            <span class="text"> DASHBOARD </span> 
         </router-link>
      </li>
    </ul>
   </div>
</div>
</template>

Penjelasan:
Pada template diatas kita menggunakan komponen router-link sebagai navigasi dengan atribut 'to' yang berisi url ke komponen WelcomeAdmin.vue dengan route name yaitu dashboard.

Langkah selanjutnya buka app.js di direktori resources/js/ untuk mengimportnya.

import Menuadmin from './components/Menuadmin'

Kemudian tambahkan juga properti components pada instance vue dan daftarkan komponen Menuadmin.

const app = new Vue({
    el: '#app',
    router,
    components: {
      Menuadmin
    }
});

Hasilnya:

require('./bootstrap');

window.Vue = require('vue');
 
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import WelcomeAdmin from './components/WelcomeAdmin'
import Menuadmin from './components/Menuadmin'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/admin/dashboard',
            name: 'dashboard',
            component: WelcomeAdmin, 
        },

    ],
});

const app = new Vue({
    el: '#app',
    router,
    components: { Menuadmin }
});

Langkah terakhir kita akan merender komponen Menuadmin.vue di index.blade.php agar dapat tampil.

<!-- Sidebar Menu -->
<Menuadmin></Menuadmin>

Jika kita lihat hasilnya, maka akan terlihat seperti gambar dibawah ini:

Secara default router-link akan merender tag a untuk setiap menunya, dan secara otomatis ketika menu route aktif maka akan terbuat sebuah class router-link-active pada tag a tersebut yang dapat kita berikan style.