Vue CLI: Membuat Progress Bar Loading Untuk Tiap Component

cara membuat loading nprogress vue cli - Halo! Selamat datang di artikel TB kali ini. Sekarang, saya akan membagikan tutorial seputar pemrograman web di sisi front end. Dikhususkan untuk framework client-side Vue JS.

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 nprogress

2. 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!