I have ment to look into Vue for a long time. Finally I took my time and fell in love right away. The simplicity and modularity is just great. I also saw how easy you can extend it so I decided to implement a plugin for my SignalR event aggregation library.

Plugins in Vue

Its really easy to create plugins with Vue. You just declare a function like

MyPlugin.install = function (Vue, options) {

   // inject some component options
  Vue.mixin({
    destroyed: function () {
      // some logic ...
    }
    ...
  })

  // add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // some logic ...
  }
}

And then install with Vue using

Vue.use(MyPlugin); 

Whats nice is that the component/viewmodel instance is kept over my plugin and the vm using it, so marshaling the object context (typically the this keyword) is really easy. This is really nice since then I can hide the context from the user. With destroyed function I can even call the vanilla libraries unsubscribe function so that the user does not need to think about this.

Using the plugin

new Vue({
    el: '#app',
    data: {
        events: []
    },
    created: function() {
        this.subscribe(MyApp.MyEvent, this.onEvent);        
    },
    methods: {
        onEvent: function(e) {
            this.events.push(e);
        }
    }
});

Above I have declared a Vue vm and from the created method I call subscribe which will hook up the server side event and the onEvent method will fire whenever a server side event is fired.

Source code

(function (signalR, vue) {
    signalR.install = function (vue) {
        vue.mixin({
            destroyed: function () {
                signalR.eventAggregator.unsubscribe(this);
            }
        });

        vue.prototype.subscribe = function (type, handler, constraint) {
            signalR.eventAggregator.subscribe(type, handler, this, constraint);
        };

        vue.prototype.publish = function (event) {
            signalR.eventAggregator.publish(event);
        };
    };
})(signalR || {}, Vue);

Here you can see the beauty of Vue, just a few lines of code for a wrapper like this. First I hook up to the destroyed function so that I can unsubscribe the context and its listeners. I also add two methods subscribe and publish. As you can see I can hide the context from the user by using this from the prototype function.