Tutorial kali ini akan sangat simpel. Kita akan mencoba install sebuah style loader dan mengintegrasikannya dengan Vue Cli. Kali ini saya menggunakan design loader progress bar dari NProgress.
Buat kalian yang belum tau apa itu NProgress, jadi NProgress adalah semacam design untuk progress bar yang berjalan untuk menunjukan seberapa jauh halaman diproses sampai 100%. Sudah banyak yang memakai design login semacam ini, salah satunya adalah Youtube. Bisa dilihat setiap berganti halaman, ada progress bar berwarna merah berjalan dari kiri ke kanan yang menunjukan seberapa jauh web tersebut diload.
Baca Juga: Lazy Load Route Untuk Mempercepat Loading Halaman Vue JS
Nah, sekarang saya akan mencoba membuat progress bar semacam itu di vue cli. Jadi setiap berganti route/component, progress bar akan muncul. Berikut langkah-langkahnya
1. Install NProgress di projek Vue Cli
npm install nprogress2. Tambahkan CDN style NProgress ke file public/index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css">Sekarang saatnya konfigurasi routing agar menampilkan Progress Bar tiap beralih component.
3. Masuk ke file src/router.js, lalu import NProgress yang sudah diinstall lewat npm tadi. Masukan kode berikut ini di line paling atas.
import NProgress from 'nprogress'4. Masukan semua kode vue router kedalam sebuah variabel
const router = new Router({
// isi dari pengaturan router
})
5. Masukan konfigurasi NProgress dibawah variabel router
router.beforeEach((to, from, next) => {
NProgress.start()
NProgress.set(0.5)
next()
})
router.afterEach(() => {
setTimeout(() => NProgress.done(), 20)
})6. Langkah terakhir kita export default untuk variabel routernya.
export default router
7. Secara keseluruhan, file src/router.js akan terlihat seperti ini.
import Vue from 'vue'
import Router from 'vue-router'
import NProgress from 'nprogress'
Vue.use(Router)
const router = new Router({
// isi dari pengaturan router
})
router.beforeEach((to, from, next) => {
NProgress.start()
NProgress.set(0.5)
next()
})
router.afterEach(() => {
setTimeout(() => NProgress.done(), 20)
})
export default router
Sekarang tinggal dites. Setelah semua route diset, silahkan akses setiap component secara bergantian. Otomatis muncul progress bar dibagian paling atas.
Oke, sekian artikel kali ini. Semoga bermanfaat! Terima Kasih!
Terima kasih telah membaca artikel tentang Vue CLI: Membuat Progress Bar Loading Untuk Tiap Component di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
