vue-magnific. Magnific-popup wrapper for Vue.js

index.js

const _   = require('lodash');
const $   = require('jquery');
const Vue = require('vue');
require('jquery.magnific-popup');

module.exports = Vue.extend({
  template: require('./tpl.html'),
  props: {
    show: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: function () {
        return {
          // magnific defaults
        };
      }
    }
  },
  watch: {
    show: function () {
      this[this.show ? 'open' : 'close']();
    }
  },
  methods: {
    open: function () {
      if (!!$.magnificPopup.instance.isOpen && this.show) { return; }

      var cmp = this;
      var config = _.merge(this.config, {
        items: {
          src:  $(this.$els.modal),
          type: 'inline'
        },
        callbacks: {
          open: function () {
            cmp.show = true;
            cmp.$emit('open');
          },
          close: cmp.close
        }
      });

      $.magnificPopup.open(config);
    },
    close: function () {
      if (!$.magnificPopup.instance.isOpen && !this.show) { return; }

      this.show = false;
      $.magnificPopup.close();
      this.$emit('close');
    },
    toggle: function () {
      this[this.show ? 'close' : 'open']();
    }
  },
  ready: function () {
    this[this.show ? 'open' : 'close']();
  }
});

tpl.html

<style>
  .mfp-content {
    text-align: center;
  }

  .modal-cmp-content-wrapper {
    display: inline-block;
    position: relative;
  }
  .modal-cmp-content {
    display: inline-block;
    text-align: left;
  }
  .modal-cmp-content-wrapper .mfp-close {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 100%;
    left: 100%;

    color: #fff;
  }
</style>

<div class="modal-cmp-content-wrapper"
     v-show="show"
     v-el:modal
>
  <div class="modal-cmp-content">
    <slot></slot>
  </div>
</div>

would be cool to release this as NPM package

+1

+2

+3