vue-popper directive

vue-popper-directive.js

const Popper = require('popper.js');

(function (Vue) {
  let VuePopperDirective = {
    params: ['placement', 'content', 'show'],
    
    popper: null,
    
    initPopper() {
      this.popper = new Popper(
        $(this.el),
        {
          content: this.params.content || '',
          contentType: 'html'
        },
        {
          placement: this.params.placement || 'bottom',
          removeOnDestroy: true
        }
      );
    },
    
    destroyPopper() {
      if (this.popper) {
        this.popper.destroy();
        this.popper = null;
      }
    },
    
    bind() {
      Vue.nextTick(() => {
        if (this.params.show) {
          this.initPopper();
        }
      });
    },
    
    paramWatchers: {
      show(val, oldVal) {
        if (!!this.params.show) {
          this.destroyPopper();
          Vue.nextTick(() => {
            this.initPopper();
          });
        }
        else if (this.popper) {
          this.destroyPopper();
        }
      }
    },
    
    unbind() {
      this.destroyPopper();
    }
  };


  /*
   * Install Vue Directive if Vue is available
   */

  if (typeof Vue !== "undefined") {
    Vue.directive('popper', VuePopperDirective);
  }
})(window.Vue);

Moved to https://github.com/antongorodezkiy/vue-popper-directive