Vue Directives: Prevent Default

preventDefault.babel.js

const eventNames = {
  BUTTON: 'click',
  A: 'click',
  FORM: 'submit',
};

export default {
  bind() {
    const eventName = eventNames[this.el.nodeName];
    if (!eventName) {
      throw 'Prevent Default: Unhandled element';
    } else {
      this.el.addEventListener(eventName, e => e.preventDefault());
    }
  },
};

preventDefault.js

var eventNames = {
  BUTTON: 'click',
  A: 'click',
  FORM: 'submit'
};

module.exports = {
  bind: function bind() {
    var eventName = eventNames[this.el.nodeName];
    if (!eventName) {
      throw 'Prevent Default: Unhandled element';
    } else {
      this.el.addEventListener(eventName, function (e) {
        return e.preventDefault();
      });
    }
  }
};

One small thing: you can omit the update function if you don't need it. Actually it's preferred to omit it so that Vue knows the directive is non-reactive.

Perfect! Thanks for the tip.