NProgress is not defined in Vue router

user_10496449 0
Viewed 1119

app.js

const app = new Vue({
    el: '#wrapper',
    router,
    store
});

router.js

  const router = new VueRouter({
    routes,
    hashbang: false,
    mode: 'history',

})

router.beforeEach((to, from, next) => {
    NProgress.start()
    NProgress.set(0.1)
    next()
})
router.afterEach(() => {
    setTimeout(() => NProgress.done(), 500)
})

Error

NProgress is not defined

I have already installed vue-nprogress using npm still it's showing undefined. How to solve this issue? Thanks in advance!

vue-nprogress vue-router vuejs2 vue.js
1 Answers

Import and use the plugin in the main.js file as follows:

...

import NProgress from 'vue-nprogress'

 
Vue.use(NProgress)
 
const nprogress = new NProgress()
 
const app = new Vue({
    el: '#wrapper',
    router,
    store,
    nprogress
});

then in router.js access to that instance using router.app.$nprogress :

 const router = new VueRouter({
    routes,
    hashbang: false,
    mode: 'history',

})

router.beforeEach((to, from, next) => {
    router.app.$nprogress.start()
    router.app.$nprogress.set(0.1)
    next()
})
router.afterEach(() => {
    setTimeout(() => router.app.$nprogress.done(), 500)
})
user_81728570
Related