Buefy: Call loading component from vuex/vuerouter

[RomainMazB]

Description

Like dialog component, the loading component should be callable from inside of a Vuex store or from VueRouter instance or event from outside.

Why Buefy need this feature

So we can attach loading state to all API call like this:

import axios from 'axios'
import loading from 'buefy'

const instance = axios.create({
    // baseURL: '/api'
  })

const loading = buefy.loading

instance.interceptors.request.use(config => {
    loading.open()
    return config
})

  instance.interceptors.response.use(response => {
    loading.close()
    return response
})

export default instance

[jtommy]

Try import { LoadingProgrammatic as Loading } and then Loading.open()

[RomainMazB]

Thanks for your quick answer but... How am I supposed to close it? Uncaught (in promise) TypeError: buefy__WEBPACK_IMPORTED_MODULE_1__.LoadingProgrammatic.close is not a function at eval

import axios from 'axios'
import { LoadingProgrammatic as loading} from 'buefy'

const instance = axios.create({
    baseURL: '/api'
})


instance.interceptors.request.use(config => {
    loading.open()
    return config
})

  instance.interceptors.response.use(response => {
    loading.close()
    return response
})

export default instance

[jtommy]

Open method returns an instance of loading component, you have to use it to call close method. For example const myloading = Loading.open() and then myloading.close()