How to use vuesax $vs.notify outside of vue component

Question

I am using $vs.notify to show message that comes from db. So thought of using it in the actions.js. but getting error as TypeError: Cannot read property 'notify' of undefined. Is there any way that i could use it in action.js file. used code is here:

addTag({
    commit
}, tag) {
    return new Promise((resolve, reject) => {
        Vue.prototype.$http.post('/tags/add/', {
                tag
            })
            .then((response) => {
                commit('ADD_TAG', Object.assign(response.data.data[0]))
                Vue.prototype.$vs.notify({
                    title: 'Success',
                    text: `tag-${response.data.data[0].name} added suceesfully`,
                    iconPack: 'feather',
                    icon: 'icon-alert-circle',
                    color: 'success'
                })
                resolve(response)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

enter image description here

Answer 1

Vuesax doesn't register anything on Vue.prototype, which is why you get that particular error message. It seems the service is added to each component instead. It's also not available for importing in the module. So, as a workaround, you can add it to the prototype yourself.

Add the service in App.vue to Vue.prototype:

App.vue

<script>
import Vue from 'vue';

export default {
  created() {
    Vue.prototype.$vs = this.$vs;
  }
}
</script>

Now you can use it the way you tried in your post:

actions.js

import Vue from 'vue';

Vue.prototype.$vs.notify(...)

Answer 2

In the official documentation, it states that

To add a notification we have the global function $vs.notify

So, try using this._vm.$vs.notify or maybe this._vm.notify in your vuex action.