Setelah memahami dasar penggunaan vue-router di materi sebelumnya Routing Pada Vue.js dengan vue-router, kali ini saya akan mengajak Anda untuk membuat template Vue.js sederhana dengan vue-router, disertai EventBus yang dapat diakses secara global dari seluruh komponen Vue.

Project globaleventbus (silahkan buat terlebih dahulu dengan perintah Vue-CLI vue create globaleventbus) terdiri dari tiga halaman berbeda, yaitu : Home, Profil dan Kontak. Masing-masing halaman dapat diakses via <router-link>, jadi refresh halaman browser sudah tidak diperlukan ketika berpindah halaman. EventBus digunakan untuk menandai route yang aktif / dipilih dari <router-link>.

Langkah 1 – Persiapan

Pertama-tama, samakan struktur project globaleventbus Anda. Hapus semua file di folder src/components/ dan src/views/, buat folder kosong bernama src/services/, lalu copy paste file bootstrap.min.css ke folder src/assets/.

membuat eventbus dengan akses global pada vue js
Folder assets, components, router, services dan views berada di dalam folder src

Langkah 2 – Inisiasi EventBus Untuk Diakses Secara Global

Buat file eventbus.js di dalam folder src/services/, lalu copy paste baris kode berikut :

import Vue from "vue";

export const EventBus = new Vue();

Nama inisiasi EventBus akan dipanggil melalui import { EventBus } from "@/services/eventbus.js". Jika nama inisiasi diganti ke nama lain, misal CobaEventBus, maka pemanggilan melalui import juga harus sesuai nama tersebut, misal import { CobaEventBus } from "@/services/eventbus.js".

Langkah 3 – Siapkan Komponen yang Dibutuhkan

Di dalam folder src/components/ buat tiga komponen dasar, masing-masing diwakili oleh file BootstrapAlert.vue sebagai alert, BootstrapJumbotron.vue sebagai jumbotron dan BootstrapNavbar.vue sebagai navbar (Navigation Bar).

Isi file BootstrapAlert.vue :

<template>
  <div :class="classAlert">Anda berada di halaman {{ halaman }}</div>
</template>

<script>
export default {
  name: "BootstrapAlert",
  props: ["jenisAlert", "halaman"],
  data() {
    return {};
  },
  computed: {
    classAlert() {
      return "alert " + "alert-" + this.jenisAlert;
    }
  }
};
</script>

Isi file BootstrapJumbotron.vue :

<template>
  <div class="jumbotron text-center">
    <h1>Variancode.com</h1>
    <p>08-222-666-777-8</p>
    <p>Membuat EventBus dengan Akses Global Pada Vue.js</p>
  </div>
</template>

<script>
export default {
  name: "BootstrapJumbotron"
};
</script>

<style>
.jumbotron {
  padding: 2rem 2rem;
}
</style>

Isi file BootstrapNavbar.vue :

<template>
  <nav
    class="navbar navbar-expand-sm bg-success navbar-dark justify-content-center"
  >
    <ul class="navbar-nav">
      <li v-for="(link, index) in links" :key="index" class="nav-item">
        <router-link
          class="nav-link"
          :class="{ active: link == routeAktif }"
          :to="{
            name: link
          }"
          >{{ link }}</router-link
        >
      </li>
    </ul>
  </nav>
</template>

<script>
import { EventBus } from "@/services/eventbus.js";

export default {
  name: "BootstrapNavbar",
  data() {
    return {
      links: ["Home", "Profil", "Kontak"],
      routeAktif: ""
    };
  },
  created() {
    EventBus.$on("pindahRoute", namaRouteAktif => {
      this.routeAktif = namaRouteAktif;
    });
  }
};
</script>

<style>
.navbar {
  margin-bottom: 50px;
}
</style>

Agar dapat digunakan, EventBus yang telah didefinisikan secara global pada file eventbus.js harus terlebih dahulu di-import dengan baris kode import { EventBus } from "@/services/eventbus.js". EventBus di NavBar akan melakukan listening setiap event yang dikirim oleh EventBus.$emit("pindahRoute", this.namaRouteAktif) pada file Home.vue, Kontak.vue dan Profil.vue melalui baris kode :

EventBus.$on("pindahRoute", namaRouteAktif => {
    this.routeAktif = namaRouteAktif;
});

Langkah 4 – Siapkan Template Induk dan Halaman yang Dibutuhkan

Buat file TemplateFrontend.vue di dalam folder src/views/ (file ini akan digunakan sebagai template induk), copy paste baris kode berikut :

<template>
  <div>
    <bootstrap-jumbotron />
    <bootstrap-navbar />
    <div class="container">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/bootstrap.min.css";

import BootstrapJumbotron from "@/components/BootstrapJumbotron";
import BootstrapNavbar from "@/components/BootstrapNavbar";

export default {
  name: "TemplateFrontend",
  components: {
    BootstrapJumbotron,
    BootstrapNavbar
  }
};
</script>

<style>
.jumbotron {
  margin-bottom: 0;
}
</style>

Catatan : setiap routing halaman yang di-register di vue-router, nantinya diakses melalui <router-view></router-view>.

Kemudian, buat folder baru bernama src/views/template_frontend/ di dalam folder src/views/, isi dengan tiga halaman yang dibutuhkan, masing-masing : Home.vue, Kontak.vue dan Profil.vue.

Isi file Home.vue :

<template>
  <bootstrap-alert jenis-alert="primary" halaman="Home"></bootstrap-alert>
</template>

<script>
import { EventBus } from "@/services/eventbus.js";

import BootstrapAlert from "@/components/BootstrapAlert";

export default {
  name: "Home",
  components: {
    BootstrapAlert
  },
  mounted() {
    EventBus.$emit("pindahRoute", this.namaRouteAktif);
  },
  computed: {
    namaRouteAktif() {
      return this.$route.name;
    }
  }
};
</script>

Isi file Kontak.vue :

<template>
  <bootstrap-alert jenis-alert="warning" halaman="Kontak"></bootstrap-alert>
</template>

<script>
import { EventBus } from "@/services/eventbus.js";

import BootstrapAlert from "@/components/BootstrapAlert";

export default {
  name: "Kontak",
  components: {
    BootstrapAlert
  },
  mounted() {
    EventBus.$emit("pindahRoute", this.namaRouteAktif);
  },
  computed: {
    namaRouteAktif() {
      return this.$route.name;
    }
  }
};
</script>

Isi file Profil.vue :

<template>
  <bootstrap-alert jenis-alert="danger" halaman="Profil"></bootstrap-alert>
</template>

<script>
import { EventBus } from "@/services/eventbus.js";

import BootstrapAlert from "@/components/BootstrapAlert";

export default {
  name: "Profil",
  components: {
    BootstrapAlert
  },
  mounted() {
    EventBus.$emit("pindahRoute", this.namaRouteAktif);
  },
  computed: {
    namaRouteAktif() {
      return this.$route.name;
    }
  }
};
</script>

Langkah 5 – Daftarkan Routing Setiap Halaman ke vue-router

Buat file index.js di dalam folder src/router/, copy paste baris kode berikut :

import Vue from "vue";
import VueRouter from "vue-router";

import Home from "@/views/template_frontend/Home.vue";
import Profil from "@/views/template_frontend/Profil";
import Kontak from "@/views/template_frontend/Kontak";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/profil",
    name: "Profil",
    component: Profil
  },
  {
    path: "/kontak",
    name: "Kontak",
    component: Kontak
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

Tips : penamanaan route name: selalu saya samakan dengan component: (termasuk huruf besar dan kecilnya).

Langkah 6 – Register Komponen Template Induk ke App.vue

Isi file App.vue :

<template>
  <div id="app">
    <template-frontend></template-frontend>
  </div>
</template>

<script>
import TemplateFrontend from "@/views/TemplateFrontend";

export default {
  name: "App",
  components: {
    TemplateFrontend
  }
};
</script>

Tips : selain route, penamaan komponen name: di dalam export default {} juga selalu saya samakan degan nama file Vue-nya. Misal, nama file App.vue ditulis name: "App" atau nama file Kontak.vue ditulis name: "Kontak".

Hasil Akhir

Struktur akhir folder dan file pada project Vue globaleventbus :

membuat eventbus dengan akses global pada vue js

Hasil eksekusi project Vue globaleventbus dengan perintah npm run serve :

membuat eventbus dengan akses global pada vue js
Debugging di sidebar sebelah kanan menggunakan Chrome Extension Vue.js DevTools