Category: Javascript

Pendahuluan

Membuat sebuah aplikasi tidak hanya sebatas dapat membuatnya bekerja sesuai yang kita inginkan, melainkan juga memikirkan kemungkinan perubahan dan penambahan fitur dari aplikasi tersebut. Nah, apa jadinya, jika aplikasi kamu sudah cukup kompleks dan beberapa bulan kemudian kamu ingin melakukan perubahan, tapi justru membuatmu kebingungan?

Salah satu fitur lainnya dari Vuex, selain memudahkan kamu dalam manajemen state agar dapat digunakan oleh semua component yang berperan, juga memungkinkan kamu untuk memecah block code yang telah dibuat kedalam Module sesuai dengan peruntukannya masing-masing. Misalnya, kita memiliki 3 buah fitur, yakni: Donatur, Bantuan dan Transaksi. Jika ketiga code untuk meng-handle fitur tersebut disatukan dalam satu buah file, maka mengelolanya akan sangat membingungkan dikemudian hari. Bagaimana tidak? Jika code dari masing-masing fitur saling tercampur baur satu sama lain.

Tahap Persiapan

Meskipun artikel ini merupakan lanjutan dari seri sebelumnya, tapi kita akan memulainya dengan case yang berbeda, yakni: membuat aplikasi donasi. Buat project fresh install terlebih dahulu:

npm create donasi

Pilih Manually select feature, lalu ceklis pilihan berikut :

Masuk ke direktori donasi, install bootstrapVue

cd donasi
vue add bootstrap-vue

Menyiapkan Component Helper

Setelah selesai buka editor, kita akan membuat 2 buah component helper, Donatur & Bantuan.

components/Donatur.vue

<template>
    <div>
        <div class="form-group">
            <label for="">Donatur</label>
            <select @change="$emit('selectedDonatur', $event.target.value)" class="form-control">
                <option value="">Pilih Donatur</option>
                <option v-for="donatur in listDonatur" :key="donatur.id" :value="donatur.id">
                    {{ donatur.name }}
                </option>
            </select>
        </div>
    </div>
</template>
<script>
    export default {
        computed: {
            //MEMBUAT COMPUTED PROPERTY DENGAN NAMA listDonatur()
            listDonatur() {
                //DATA DIAMBIL DARI STATE MODULE donatur
                return this.$store.state.donatur.listDonatur
            }
        }
    }
</script>

components/Bantuan.vue

<template>
    <div>
        <div class="form-group">
            <label for="">Jenis Bantuan</label>
            <select @change="$emit('selectedBantuan', $event.target.value)" class="form-control">
                <option value="">Pilih Bantuan</option>
                <option v-for="row in listBantuan" :key="row.id" :value="row.id">
                    {{ row.name }}
                </option>
            </select>
        </div>
    </div>
</template>
<script>
export default {
    computed: {
        //MEMBUAT COMPUTED PROPERTY DENGAN NAMA listBantuan()
        listBantuan() {
            //DATA DIAMBIL DARI STATE MODULE clients
            return this.$store.state.bantuan.listBantuan
        }
    }
}
</script>

Menyiapkan State Module untuk Component Helper

Selanjutnya kita akan membuat state module untuk kedua component di atas.

modules/donatur.js

const donatur = {
    namespaced: true,
    state: {
        listDonatur: [
            { id:'1', name: 'Riski Amelia' },
            { id:'2', name: 'Ima Sumadir' },
            { id:'3', name: 'Apri Yunita' },
            { id:'4', name: 'Tuti Winarti' }
        ]
    },
    getters: {
        getNameById: (state) => (id) => {
            return state.listDonatur.find((obj) => {
                return obj.id===id
            })
        }
    },
    mutations: {
        // NONE
    },
    actions: {
        // NONE
    }
}

export default donatur

modules/bantuan.js

const bantuan = {
    namespaced: true,
    state: {
        listBantuan: [
            { id:"1", name: 'Gempa Lombok', },
            { id:"2", name: 'Beasiswa Pendidikan' },
            { id:"3", name: 'Banjir Bandang' },
            { id:"4", name: 'Tanggungan Kesehatan' }
        ]
    },
    getters: {
        getBantuanById: (state) => (id) => {
            return state.listBantuan.find((obj) => {
                return obj.id===id
            })
        }
    },
    mutations: {
        // NONE
    },
    actions: {
        // NONE
    }
}

export default bantuan

Sebelum ke tahap selanjutnya, saya akan mengajak anda memahami kedua component helper di atas yaitu Donatur.vue dan Bantuan.vue dimana keduanya hanya berisi template select form yang berisi data master dari dua state module yaitu donatur.js dan bantuan.js.

Menyiapkan Component View

Selanjutnya kita akan membuat View Donasi.vue yang berisi component FormDonasi.vue untuk manambahkan transaksi & component Transaksi untuk menampilkan data transaksi.

views/Donasi.vue

<template>
  <div class="home">
    <div class="container" style="padding-top: 20px">
        <div class="row">
          <div class="col-md-6">
            <FormDonasi/>
          </div>
          <div class="col-md-6">
            <Transaksi/>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import FormDonasi from "@/components/FormDonasi.vue";
import Transaksi from "@/components/Transaksi.vue";

export default {
  name: "home",
  components: {
    FormDonasi,
    Transaksi
  }
};
</script>

component/FormDonasi.vue

<template>      
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Form Donasi</h3>
            <!--<h4 v-if="typeof donatur_row === 'object'">{{donatur_row.name}}</h4>
            <h4 v-if="typeof bantuan_row === 'object'">{{bantuan_row.name}}</h4>-->
        </div>
        <div class="card-body">
            <form @submit.prevent="formSubmit">
                <list-donatur @selectedDonatur="selectedDonatur" />
                <lokasi-bantuan @selectedBantuan="selectedBantuan" />
                <div class="form-group">
                    <label for="">Jumlah Donasi (Rp)</label>
                    <input type="number" v-model="jumlah" class="form-control">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-sm" :disabled="isLoading">
                        {{ isLoading ? 'Loading...':'Donasi!' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import Donatur from "@/components/Donatur.vue";
import Clients from "@/components/Bantuan.vue";

export default {
    components: {
        'list-donatur': Donatur,
        'lokasi-bantuan': Clients,
    },
    data() {
        return {
            donatur: '',
            bantuan: '',
            jumlah: 0
        }
    },
    computed: {
        donatur_row: function () {
            //MENGAMBIL NAMA DONATUR BERDASARKAN ID MENGGUNAKAN GETTERS
            return this.$store.getters['donatur/getNameById'](this.donatur);
        },
        bantuan_row: function () {
            //MENGAMBIL NAMA BANTUAN BERDASARKAN ID MENGGUNAKAN GETTERS
            return this.$store.getters['bantuan/getBantuanById'](this.bantuan);
        },
        isLoading() {
            //MENGAMBIL STATE DARI ROOT VUEX (store.js)
            //JADI, SETELAH .state. LANGSUNG MENYEBUTKAN NAMA STATENYA
            //KARENA TIDAK MASUK KEDALAM MODULE
            return this.$store.state.isLoading
        }
    },
    methods: {
        //HANDLE EMIT DARI COMPONENT DONATUR
        selectedDonatur(val) {
            this.donatur = val;
        },
        //HANDLE EMIT DARI COMPONENT CLIENTS
        selectedBantuan(val) {
            this.bantuan = val
        },
        formSubmit(event) {
            //MENGUBAH ID MENJADI NAMA
            this.donatur= typeof this.donatur_row === 'object'?this.donatur_row.name:'0';
            this.bantuan= typeof this.bantuan_row === 'object'?this.bantuan_row.name:'0';
            this.$store.dispatch('transaksi/save_donasi', {
                //MENGIRIM 4 BUAH PARAMETER YANG AKAN DIPUSH KEDALAM LISTS ARRAY listTransaksi
                id: Math.random().toString(36).substring(7),
                donatur: this.donatur,
                bantuan: this.bantuan,
                jumlah: this.jumlah
            });
            this.jumlah="0";
            event.target.reset();
        }
    }
}
</script>

Penjelasan mengenai

component/Transaksi.vue

<template>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Donasi Terkumpul</h3>
        </div>
        <div class="card-body">         
            <div class="table-responsive">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Donatur</th>
                            <th>Jenis Bantuan</th>
                            <th>Jumlah</th>
                        </tr>
                    </thead>
                    <tbody>
                    <!-- LOOPING LIST ARRAY DARI listTransaksi -->
                    <tr v-for="(row, index) in listTransaksi" :key="index">
                        <td>{{ row.id }}</td>
                        <td>{{ row.donatur }}</td>
                        <td>{{ row.bantuan }}</td>
                        <td>{{ row.jumlah }}</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>{{ total }}</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex' //IMPORT mapState
export default {
    computed: {
        //MENGGUNAKAN HELPER mapState UNTUK MEMANGGIL MODULE transaksi
        ...mapState('transaksi', {
            // DIMANA DATA YANG AKAN DIAMBIL ADALAH STATE listTransaksi
            listTransaksi: state => state.listTransaksi,
        }),
        total() {
            return this.listTransaksi.map(item => item.jumlah).reduce((total, amount) => total + parseInt(amount));
        }
    }
}
</script>

Menyiapkan State Module untuk Transaksi

Karena Transaksi.vue merupakan sebuat data maka kita juga akan state module untuk component transaksi yaitu modules/transaksi.js

modules/transaksi.js

const transaksi = {
    namespaced: true,
    state: {
        //DEFAULT DATA TRANSAKSI YANG AKAN DITAMPILKAN
        //PADA COMPONENT TRANSAKSI.VUE
        listTransaksi: [
            { id: 'TRX1P1', donatur: 'Anugrah Sandi', bantuan: 'Gempa Lombok', jumlah: 100000 },
            { id: 'TRX1P2', donatur: 'Dharma', bantuan: 'Banjir Bandang', jumlah: 250000 },
            { id: 'TRX1P3', donatur: 'Asis Ramadhan', bantuan: 'Beasiswa Pendidikan', jumlah: 3000000 }
        ]
    },
    mutations: {
        //MENGUBAH STATE DENGAN
        ADD_DONASI: (state, payload) => {
            //MENAMBAHKAN DATA BARU KEDALAM ARRAY MENGGUNAKAN PUSH()
            state.listTransaksi.push(payload);
        }
    },
    actions: {
        save_donasi({ commit, rootState }, payload) {
            // rootState BERARTI MENGAKSES STATE YANG TIDAK BERADA DALAM MODULES
            // DALAM HAL INI STATE isLoading YANG ADA DI DALAM FILE store.js
            rootState.isLoading = true //SET TRUE UNTUK MEMBERIKAN EFEK LOADING
            setTimeout(() => {
                //MENGINSTRUKSIKAN PADA MUTATIONS TERKAIT UNTUK MENJALANKAN INSTRUKSINYA
                commit('ADD_DONASI', payload)
                // STATE isLoading DI MATIKAN KEMBALI
                rootState.isLoading = false
            }, 1000)
        }
    }
}

export default transaksi

Menambahkan Menu/Link menuju Donasi.vue

Setelah semuanya siap kita akan membuat Link Menu untuk menuju View Donasi dengan cara menambahkan link pada App.vue

src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/donasi">Donasi</router-link>
    </div>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Menambahkan Router

Buka file src/router.js lalu tambahkan route berikut :

{
    path: "/donasi",
    name: "Donasi",
    component: () =>
    import("./views/Donasi.vue")
}

Implementasi

Jalankan program dengan perintah berikut :

npm run serve

Hasilnya sbb :

Klik Link Donasi

Isi Form lalu ketik tombol Donasi

Struktur Direktori

Pendahuluan

Melanjutkan seri Tutorial Vuex, pada artikel sebelumnya telah dibahas bagaimana menggunakan state agar dapat digunakan oleh seluruh component yang ada. Maka pada artikel kali ini kita akan membahas bagaimana menggunakan Mutations dan Actions untuk mengelola dan melakukan perubahan data pada state.

Mutations bertugas untuk mengkonfirmasi setiap perubahan state yang akan dilakukan

Actions bertugas untuk memberikan perintah terhadap apa yang akan dilakukan. Misalnya saja, untuk melakukan perubahan data listAgenda, maka kita akan menyusun data yang akan di instruksikan ke Mutations agar melakukan perubahan pada state menggunakan perintah commit, meskipun kita dapat melakukan perubahan state secara langsung pada actions yang kita buat.

Persiapan

Pada tutorial VueJs State sebelumnya kita sudah membuat page dan component untuk menampilkan Agenda yang bernama AgendaShow. Sekarang kita buat sebuah component untuk menambahkan data bernama AgendaInput.vue berikut isi filenya:

<template>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{postTitle}}</h3>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label for="">Hari</label>
                    <input type="text" v-model="agenda.hari" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="">Kegiatan</label>
                    <input type="text" v-model="agenda.kegiatan" class="form-control" required>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger btn-sm" @click.prevent="simpan">Tambahkan</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'AgendaInput',
        props: ['postTitle'],
        data() {
            return {
                agenda: {
                    hari: '',
                    kegiatan: ''
                }
            }
        },
        methods: {
            simpan() {
                
            }
        }
    }
</script>

Saya ingin menampilkan component AgendaInput.vue sebelum component AgendaShow.vue. Pada View views/LearningVuex.vue tambahkan component AgendaInput.vue seperti di bawah ini :

<template>
	<div id="app" class="container">
		<div class="row py-4">
			<agenda-input post-title="Input Agenda"/>
			<agenda-show post-title="Daftar Agenda"/>
		</div>
	</div>
</template>

<script>
	import AgendaInput from '../components/AgendaInput.vue'
	import AgendaShow from '../components/AgendaShow.vue'

	export default {
		name: 'app',
		components: {
			AgendaInput,
			AgendaShow
		}
	}
</script>

Hasilnya sebagai berikut:

Actions dan Mutations

Hal pertama yang akan kita lakukan adalah memodifikasi bagian methods tambahkan simpan() pada component AgendaInput.vue, tambahkan code berikut:

methods: {
    simpan() {
        this.$store.dispatch('simpanAgenda', this.agenda)
        this.agenda = {
            hari: '',
            kegiatan: ''
        }
    }
}

Penjelasan: 

• this.$store.dispatch(‘simpanAgenda’, this.agenda) akan memberikan instruksi pada actions dengan mengirimkan isi dari this.agenda yang di dapatkan dari data() yang telah di-input
• this.agenda  berfungsi untuk mengosongkan form inputan setelah di submit.

Setelah itu buka file store.js dan tambahkan code berikut pada bagian actions :

actions: {
    simpanAgenda({ commit, state }, agenda) {
        state.isLoading = true
        setTimeout(() => {
            commit('KONFIRMASI_AGENDA', agenda)
            state.isLoading = false
        }, 1500)
    }
}

Penjelasan: fungsi simpanAgenda() memiliki dua parameter, parameter pertama yang diapit oleh kurung kerawal adalah fungsi yang dimiliki oleh Vuex, diantaranya: commit, state, rootState, dispatch, dan lain sebagainya.

Namun kami ini kita hanya akan menggunakan commit dan state saja. Sedangkan untuk parameter kedua akan menampung data yang dikirimkan dari yang meng-instruksikan, dalam hal ini adalah method dari component AgendaInput.vue. 

Line-2 mengakses state isLoading dan mengubah value-nya menjadi true (Note: Inilah cara mengubah state tanpa melalui mutations). 

Line-3 membuat fungsi setTimeout untuk mengatur setelah beberapa saat barulah fungsi selanjutnya dijalankan. 

Line-4 meng-instruksikan kepada mutations dengan fungsi commit(), dimana instruksi tersebut ditujukan pada KONFIRMASI_AGENDA yang terdapat pada mutations, parameter kedua dari commit berisi data yang akan dikirimkan. 

Line selanjutnya mengubah kembali nilai dari state isLoading menjadi false.

Ada dua bagian yang perlu diperhatikan, yakni adanya state isLoading dan mutations KONFIRMASI_AGENDA, baik, mari kita lengkapi satu persatu secara bertahap. Masih di dalam file store.js, pada bagian state, tambahkan code berikut:

state: {
    isLoading: false, //<=Kode yang ditambahkan
    agenda: [
        { hari: 'Senin', kegiatan: 'Belajar Vuejs' },
        { hari: 'Selasa', kegiatan: 'Belajar Laravel' },
        { hari: 'Rabu', kegiatan: 'Belajar Mysql' }
    ],
},

Kemudian pada bagian mutations, tambahkan code berikut:

mutations: {
    KONFIRMASI_AGENDA: (state, agenda) => {
        state.agenda.push(agenda)
    }
},

Penjelasan: 

KONFIRMASI_AGENDA memiliki dua parameter, parameter pertama adalah state untuk mengakses state yang ada. Sedangkan parameter kedua adalah value yang diterima dari yang meng-instruksikan. state.agenda berarti kita mengakses state listAgenda untuk kemudian ditambahkan data baru dengan fungsi push().

Sampai pada tahap ini, sudah dapat berfungsi sebagaimana mestinya. Tapi, kita menambahkan isLoading yang bertujuan untuk memberikan efek loading ketika tombol ditekan, maka buka file AgendaInput.vue, kemudian modifikasi pada tag button menjadi:

<button class="btn btn-danger btn-sm" :disabled="isLoading" @click.prevent="simpan">{{ isLoading ? 'Loading...':'Tambahkan' }}</button>

Masih di dalam file yang sama, tambahkan computed property berikut:

computed: {
    isLoading() {
        return this.$store.state.isLoading
    }
},

Jalankan

Masukan Hari: Minggu, Kegiatan: Libur, lalu klik tombol Tambahkan maka hasil yang akan diperoleh akan tampak seperti berikut :

File lengkap :

file components/AgendaInput.vue

<template>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{postTitle}}</h3>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label for="">Hari</label>
                    <input type="text" v-model="agenda.hari" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="">Kegiatan</label>
                    <input type="text" v-model="agenda.kegiatan" class="form-control" required>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger btn-sm"
                    :disabled="isLoading"
                    @click.prevent="simpan">{{ isLoading ? 'Loading...':'Tambahkan' }}</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'AgendaInput',
        props: ['postTitle'],
        data() {
            return {
                agenda: {
                    hari: '',
                    kegiatan: ''
                }
            }
        },
        computed: {
            isLoading() {
                return this.$store.state.isLoading
            }
        },
        methods: {
            simpan() {
                this.$store.dispatch('simpanAgenda', this.agenda)
                this.agenda = {
                    hari: '',
                    kegiatan: ''
                }
            }
        }
    }
</script>

file src/store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
      isLoading: false,
      agenda: [
        { hari: 'Senin', kegiatan: 'Belajar Vuejs' },
        { hari: 'Selasa', kegiatan: 'Belajar Laravel' },
        { hari: 'Rabu', kegiatan: 'Belajar Mysql' }
      ],
      listAgenda2: [
        { hari: 'Kamis', kegiatan: 'Belajar Nuxt' },
        { hari: "Jum'at", kegiatan: 'Belajar Flutter' },
      ]
  },
  mutations: {
    KONFIRMASI_AGENDA: (state, agenda) => {
        state.agenda.push(agenda)
    }
  },
  actions: {
    simpanAgenda({ commit, state }, agenda) {
      state.isLoading = true
      setTimeout(() => {
          commit('KONFIRMASI_AGENDA', agenda)
          state.isLoading = false
      }, 1500)
    }
  }
});

Kesimpulan

Actions dan Mutations dapat di-ibaratkan sebagai instruktur dan eksekutor, meskipun sang instruktur juga dapat mengeksekusi instruksinya sendiri. 3 Bagian penting (baca: state, mutations dan actions) inilah yang memiliki banyak peranan dalam mengelola data menggunakan Vuex. Lalu bagaimana misalnya jika aplikasi yang sedang kita bangun sudah sangat kompleks? Jika code tersebut di gabungkan di dalam satu file yang sama, sebut saja store.js untuk mengelola datanya, maka akan sangat membingungkan jika sudah memiliki banyak code.

Sumber :

• https://daengweb.id/tutorial-vuex-2-mutations-actions

BootstrapVue dibuat berdasarkan template yang paling populer di dunia yaitu Bootstrap v4, untuk membangun situs yang responsif menggunakan Vue.js.

Persiapan:

1. Buat Project Menggunakan Vue CLI

Kita angap nama Project ini adalah learning-vue-bootstrap. Masuk ke direktori project:

Install BootstrapVue.

cd learning-vue-bootstrap
vue add bootstrap-vue

Install Vue Router

npm install vue-router

Buat file src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from "@/components/HelloWorld"
import Home from "@/components/Home"
import About from "@/components/About";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Welcome',
      component: HelloWorld
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: "/about",
      name: "About",
      component: About
    }
  ]
})

Karena kita menggunakan router, maka kita harus mengimport router pada src/main.js

import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

Kita lihat di index.js ada dua komponen tambahan yaitu Home & About. Kita buat kedua komponen ini

src/component/Home.vue

<template>
    <div class="home">
        <b-jumbotron header="HOME" lead="https://ombagoes.com">
            <p><strong>{{title}}</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged.
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </b-jumbotron>
    </div>
</template>
<script>
export default {
  data() {
      return {
          title: 'Halaman Utama'
      }
  },
}
</script>

src/component/About.vue

<template>
    <div class="about">
        <b-jumbotron header="ABOUT US" lead="https://ombagoes.com">
            <p><strong>{{title}}</strong> It is a long established fact that a reader will be distracted by the readable content of a page
            when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
            distribution of letters, as opposed to using 'Content here, content here',
            making it look like readable English. Many desktop publishing packages and
            web page editors now use Lorem Ipsum as their default model text, and a search
            for 'lorem ipsum' will uncover many web sites still in their infancy.
            Various versions have evolved over the years,
            sometimes by accident, sometimes on purpose (injected humour and the like).</p>
        </b-jumbotron>
    </div>
</template>
<script>
export default {
  data() {
      return {
          title: 'Tentang Kami'
      }
  },
}
</script>

Sekarang kita tambahkan navigasi pada src/App.vue

<template>
  <div id="app">
    <div>
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">NavBar</b-navbar-brand>
    
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav>
            <b-nav-item to="/Home">Home</b-nav-item>
            <b-nav-item to="About">About</b-nav-item>
            <b-nav-item to="#" disabled>Disabled</b-nav-item>
          </b-navbar-nav>
    
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-form>
              <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
              <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
            </b-nav-form>
    
            <b-nav-item-dropdown text="Lang" right>
              <b-dropdown-item href="#">EN</b-dropdown-item>
              <b-dropdown-item href="#">ES</b-dropdown-item>
              <b-dropdown-item href="#">RU</b-dropdown-item>
              <b-dropdown-item href="#">FA</b-dropdown-item>
            </b-nav-item-dropdown>
    
            <b-nav-item-dropdown right>
              <!-- Using 'button-content' slot -->
              <template v-slot:button-content>
                <em>User</em>
              </template>
              <b-dropdown-item href="#">Profile</b-dropdown-item>
              <b-dropdown-item href="#">Sign Out</b-dropdown-item>
            </b-nav-item-dropdown>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>
    <div class="container mt-2">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>

Jalankan Program

npm run serve

Lalu buka browser http://localhost:8080/#/Home

Cantik bukan tampilannya. Untuk mempelajari komponen BootstrapVue silakan kunjungi halamannya di https://bootstrap-vue.js.org