Vuesax: After upgrade to version 3.11.1 Vue.prototype.$vs is not available.

Created on 7 Nov 2019  路  3Comments  路  Source: lusaxweb/vuesax

I was using version 3.9.0 and after upgrade to 3.11.1 the reference to $vs in Vue.prototype is not available:

# main.js

import Vue from 'vue';
import theme from '@/plugins/Theme';

Vue.use(theme);

```javascript

plugins/Theme.js

'use strict';

import Vuesax from 'vuesax'
import theme from '@/services/theme'

export default {
install(Vue) {
require('material-icons/iconfont/material-icons.css');
require('vuesax/dist/vuesax.css');

    Vue.use(Vuesax, { theme: { colors: theme.colors } });

    console.log(Vue.prototype.$vs); // undefined
}

}

I was using notifications as a plugin, and now is not available:
```javascript
# plugins/Notify.js

'use strict';

import notify from '@/services/notify'

export default {
    install(Vue) {
        Vue.$notify = Vue.prototype.$notify = notify.install(Vue);
    }
}

```javascript

services/notify/Index.js

'use strict';

export default {
install(Vue) {
this.$vs = Vue.prototype.$vs; // undefined
this.$vs = Vue.$vs; // undefined

    return this;
},

info(message) {
    this.$vs.notify({
        text: message,
        iconPack: 'feather',
        icon: 'icon-check-circle',
        color: 'info'
    })
},

success(message) {
    this.$vs.notify({
        text: message,
        iconPack: 'feather',
        icon: 'icon-check-circle',
        color: 'success'
    })
},

error(error) {
    if (process.env.NODE_ENV !== 'production') {
        console.error(error);
    }

    this.$vs.notify({
        title: 'Error',
        text: this.errorText(error),
        iconPack: 'feather',
        icon: 'icon-alert-circle',
        color: 'danger'
    })
},

errorText(error) {
    if (error.response && error.response.data && error.response.data.message) {
        return error.response.data.message;
    }

    return error.message;
}

}

```javascript
# src/views/pages/payment/update/Data.js

'use strict';

export default {
    methods: {
        success(data) {
            this.$notify.success('OK'); // Error: $vs on notify service is undefined
        }
    }
}

There are any change on code about Vue.prototype.$vs usage?

Thanks!

Most helpful comment

This is my workaround to work with notifications

export default {
  install(Vue) {
    Vue.mixin({
      beforeCreate() {
        const vm = this;

        this.$notify = {
          success(message, title = '') {
            vm.$vs.notify({
              title,
              text: message,
              iconPack: 'feather',
              icon: 'icon-check-circle',
              color: 'success',
            });
          },
          errors(data) {
            let message = data.message;

            if (data.response && data.response.data) {
              if (data.response.data.errors) {
                const messages = [];

                Object.keys(data.response.data.errors).forEach((key) => {
                  messages.push(...data.response.data.errors[key]);
                });

                message = messages.join("<br>");
              } else if (data.response.data.message) {
                message = data.response.data.message;
              }
            }

            vm.$vs.notify({
              title: 'Error',
              text: message,
              iconPack: 'feather',
              icon: 'icon-alert-circle',
              color: 'danger',
            });
          },
        };
      }
    });
  }
};

All 3 comments

I have a similar use case and would also like to know where I could find $vs within a custom plugin.

This is my workaround to work with notifications

export default {
  install(Vue) {
    Vue.mixin({
      beforeCreate() {
        const vm = this;

        this.$notify = {
          success(message, title = '') {
            vm.$vs.notify({
              title,
              text: message,
              iconPack: 'feather',
              icon: 'icon-check-circle',
              color: 'success',
            });
          },
          errors(data) {
            let message = data.message;

            if (data.response && data.response.data) {
              if (data.response.data.errors) {
                const messages = [];

                Object.keys(data.response.data.errors).forEach((key) => {
                  messages.push(...data.response.data.errors[key]);
                });

                message = messages.join("<br>");
              } else if (data.response.data.message) {
                message = data.response.data.message;
              }
            }

            vm.$vs.notify({
              title: 'Error',
              text: message,
              iconPack: 'feather',
              icon: 'icon-alert-circle',
              color: 'danger',
            });
          },
        };
      }
    });
  }
};

Any official solution? I'm having problems when I create a mixin file and I try to call the function to close the load. Is not working. But to load is normal.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mjmnagy picture mjmnagy  路  3Comments

grali picture grali  路  4Comments

hahuy95 picture hahuy95  路  3Comments

jsinhSolanki picture jsinhSolanki  路  3Comments

jsinhSolanki picture jsinhSolanki  路  3Comments