Vue Cli: Menciptakan Progress Kafe Loading Untuk Tiap Component
cara menciptakan loading nprogress vue cli - Halo! Selamat tiba di artikel TB kali ini. Sekarang, aku 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 aku menggunakan design loader progress kafe dari NProgress.
Buat kalian yang belum tau apa itu NProgress, jadi NProgress ialah semacam design untuk progress kafe yang berjalan untuk pertanda seberapa jauh halaman diproses hingga 100%. Sudah banyak yang menggunakan design login semacam ini, salah satunya ialah Youtube. Bisa dilihat setiap berganti halaman, ada progress kafe berwarna merah berjalan dari kiri ke kanan yang pertanda seberapa jauh web tersebut diload.
Nah, kini aku akan mencoba menciptakan progress kafe semacam itu di vue cli. Makara setiap berganti route/component, progress kafe akan muncul. Berikut langkah-langkahnya
1. Install NProgress di projek Vue Cli
2. Tambahkan CDN style NProgress ke file public/index.html
Sekarang saatnya konfigurasi routing semoga menampilkan Progress Bar tiap beralih component.
3. Masuk ke file src/router.js, kemudian import NProgress yang sudah diinstall lewat npm tadi. Masukan arahan berikut ini di line paling atas.
4. Masukan semua arahan vue router kedalam sebuah variabel
5. Masukan konfigurasi NProgress dibawah variabel router
6. Langkah terakhir kita export default untuk variabel routernya.
7. Secara keseluruhan, file src/router.js akan terlihat ibarat ini.
Tutorial kali ini akan sangat simpel. Kita akan mencoba install sebuah style loader dan mengintegrasikannya dengan Vue Cli. Kali ini aku menggunakan design loader progress kafe dari NProgress.
Buat kalian yang belum tau apa itu NProgress, jadi NProgress ialah semacam design untuk progress kafe yang berjalan untuk pertanda seberapa jauh halaman diproses hingga 100%. Sudah banyak yang menggunakan design login semacam ini, salah satunya ialah Youtube. Bisa dilihat setiap berganti halaman, ada progress kafe berwarna merah berjalan dari kiri ke kanan yang pertanda seberapa jauh web tersebut diload.
Baca Juga: Lazy Load Route Untuk Mempercepat Loading Halaman Vue JS
Nah, kini aku akan mencoba menciptakan progress kafe semacam itu di vue cli. Makara setiap berganti route/component, progress kafe 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 semoga menampilkan Progress Bar tiap beralih component.
3. Masuk ke file src/router.js, kemudian import NProgress yang sudah diinstall lewat npm tadi. Masukan arahan berikut ini di line paling atas.
import NProgress from 'nprogress'4. Masukan semua arahan 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 ibarat 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 jalan masuk setiap component secara bergantian. Otomatis muncul progress kafe dibagian paling atas.
Oke, sekian artikel kali ini. Semoga bermanfaat! Terima Kasih!
Sumber https://teziger.blogspot.com/