vuesax prototype loading doesn't work outside of components

[guirociozanini]

Using vuesax 3.11.7 version.

Hello, I updated my vuesax from version 3.9.0 to 3.11.7 and now i can't use the loading function outside of vue components.

Example:

This works:

export default {
  methods:{
    openLoading(){
      this.$vs.loading()
      setTimeout( ()=> {
        this.$vs.loading.close()
      }, 2000);
    },
  }
}

This doesn't work:

axios.interceptors.response.use(response => {
        Vue.prototype.$vs.loading.close()
    return response
})

does anyone have any idea how to fix?

[guirociozanini]

I was digging more deeper and found this PR #701 , but I can't see how to control the loading component now.

[garbinmarcelo]

any news?

[guirociozanini]

Yes, I gave up on vuesax.

[garbinmarcelo]

Yes, I gave up on vuesax.

what are you using?

[guirociozanini]

Vuetify, the best framework for Vue in my opinion

[samhk222]

After hours trying to make this component work, i gave up

[guirociozanini]

My solution was to export the function to prototype again, and did work, but I don't have the code anymore :(

[samhk222]

@Keilost don't know how to do this ...

My solution, althought it's no beautiful, was to call the close inside a timeout ...

                 this.$vs.loading({
                    background: this.backgroundLoading,
                    color: this.colorLoading,
                    container: "#button-with-loading",
                    scale: 0.45,
                });

                .......

                setTimeout(() => {
                    this.$vs.loading.close("#button-with-loading > .con-vs-loading");
                }, 1);```

[christopherchristensen]

Although not pretty, my current workaround was to add $vs back to the prototype.

Vue.prototype.$vs = this.$vs;

[kelemenbalazs]

As I can see you are trying to use $vs in a js file when you set up axios interceptor to take care of the loading indicator automatically. I solved the issue as I set up a watcher in my main.vue for the isLoading boolean stored in Vuex store. In the watcher the this.$vs is available for you to open the loader when an axios request is on the fly. In the axios interceptor js file, you can just simply commit startLoading and stopLoading actions, which will take care of setting up the isLoading state for you.

[andyslack]

@Keilost don't know how to do this ...

My solution, althought it's no beautiful, was to call the close inside a timeout ...

                 this.$vs.loading({
                    background: this.backgroundLoading,
                    color: this.colorLoading,
                    container: "#button-with-loading",
                    scale: 0.45,
                });

                .......

                setTimeout(() => {
                    this.$vs.loading.close("#button-with-loading > .con-vs-loading");
                }, 1);```

Worked for me :)

setTimeout(() => {
                this.$vs.loading.close("#loading");
            }, 1);