How to trigger <b-overlay> if child calls an Axios request using vue.js

Question

How to trigger Bootstrap-vue overlay if any child makes a request e.g. using axios. I want to do this automatically, I only need a request to trigger the overlay.

 <b-overlay>
   <child>
     <other-child />
   </child>
 </b-overlay>

Answer 1

There is another option, that you can use Vuex to define global states for managing your app. Of course, if your project is small using $emit is maybe a better solution.

There is a sample code that can give you the main idea of Vuex, you need to extend it for your case.

const store = new Vuex.Store({
    state: {
        is_loading: true
    },
    mutations: {
        changeIsLoading(state, value) {
            state.is_loading = value
        },
    }
})