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)
})

Erreur

NProgress is not defined

J'ai déjà installé vue-nprogress à l'aide de npm, mais il est toujours indéfini. Comment résoudre ce problème ? Merci d'avance!

2
Harshith VA 9 nov. 2020 à 12:35

1 réponse

Meilleure réponse

Importez et utilisez le plugin dans le fichier main.js comme suit :

...

import NProgress from 'vue-nprogress'

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

Puis dans router.js, accédez à cette instance à l'aide de 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)
})
1
Boussadjra Brahim 9 nov. 2020 à 09:47