CODEWITHSUNDEEP
javascriptvue.js
Jeremie Ges
Jeremie Ges

Reputation: 2745

Namespace Mixins Vuejs

I want to be able to create a namespaced mixin.

Let's take this notification mixin for example: 

(function()  {
    'use strict';

    window.mixins = window.mixins || {}

    window.mixins.notification = {
        methods: {
            show: function(type, message, duration) {
                duration = duration || 5000;

                new Noty({
                    type: type,
                    text: message,
                    timeout: duration,
                    theme: 'custom'
                }).show();
            }
        }
    }
}());

I can import it in my component and use it:

(function() {
    'use strict';

    Vue.component('basic-component', function() {
        mixins: [window.mixins.notification],

        created: function() {
            this.show();
        }
    })
})

But I don't like it since you don't really know where it comes from.

Is it possible to namespace the mixin to be able to do something along the lines: 

(function() {
    'use strict';

    Vue.component('basic-component', function() {
        mixins: [window.mixins.notification],

        created: function() {
            this.mixins.notification.show();
        }
    })
})

Edit: It seems impossible yet, I opened an issue, feel free to comment and share your thoughts on the matter: https://github.com/vuejs/vue/issues/7501

Upvotes: 3

Views: 1414

Answers (1)

Roy J
Roy J

Reputation: 43881

There is no way for Vue mixins to work like that. You would have to do something pretty hacky.

Upvotes: 1

Related Questions