Progress bar for all api calls at one place in Vue Resource interceptors

[srabanicn]

How can I configure the progress bar for all api calls within Vue Resource Interceptors so that if any API is called it will automatically shows the progress bar on request made and finish/fail according to the response.

I'm using the below code for progress bar and interceptors.

import VueProgressBar from 'vue-progressbar'
const options = {
...
}
Vue.use(VueProgressBar, options)

Vue.http.interceptors.push((request, next) => {
next((response) => {
/** some response content**/
})
})

NOTE: I am not interested to use axios. Solution should be on Vue Resource.

[chiaweilee]

yes, use interceptors.

• request: this.$Progress.start()
• response: this.$Progress.finish()
• fail: this.$Progress.fail()

this should be vm, maybe you can find vm in interceptors, try this:

window.vm = new Vue({...})

[piyushSinghalDemo]

@chiaweilee same I am also trying but not getting working in vue-resource intercepter can you please give one simple example.
I am trying
let vm = new Vue({}); Vue.http.interceptors.push((request, next) => { vm.$Progress.start(); // for every request start the progress })
It is same in main.js. still it is showing error that can not read start of undefined.