Magnific Popup component for VueJS. Modified version of https://gist.github.com/antixrist/11f7d78fe680eb3bc15203a940b6b4f8

MagnificPopupModal.vue

<template>

  <div class="Modal mfp-hide" ref="modal">
    <div class="Modal__inner">
      <slot></slot>
    </div>
  </div>

</template>


<script>
  import _ from 'underscore'
  import $ from 'jquery'
  import 'magnific-popup'

  export default {
    name: 'magnific-popup-modal',

    props: {
      show: {
        type: Boolean,
        default: false
      },
      config: {
        type: Object,
        default: function () {
          return {
            // magnific defaults
            disableOn: null,
            mainClass: '',
            preloader: true,
            focus: '',
            closeOnContentClick: false,
            closeOnBgClick: false,
            closeBtnInside: true,
            showCloseBtn: true,
            enableEscapeKey: true,
            modal: false,
            alignTop: false,
            index: null,
            fixedContentPos: 'auto',
            fixedBgPos: 'auto',
            overflowY: 'auto',
            removalDelay: 0,
            // closeMarkup: '',
            // prependTo: document.body,
            autoFocusLast: true
          }
        }
      }
    },

    data () {
      return {
        visible: this.show
      }
    },

    mounted () {
      this[this.visible ? 'open' : 'close']()
    },

    methods: {

      /**
       * Opens the modal
       * @param {object} options Last chance to define options on this call to Magnific Popup's open() method
       */
      open: function (options) {
        if (!!$.magnificPopup.instance.isOpen && this.visible) {
          return
        }

        let root = this

        let config = _.extend(
          this.config,
          {
            items: {
              src: $(this.$refs.modal),
              type: 'inline'
            },
            callbacks: {
              open: function () {
                root.visible = true
                root.$emit('open')
              },
              close: root.close
            }
          },
          options || {})

        $.magnificPopup.open(config)
      },

      /**
       * Closes the modal
       */
      close: function () {
        if (!$.magnificPopup.instance.isOpen && !this.visible) {
          return
        }

        this.visible = false
        $.magnificPopup.close()
        this.$emit('close')
      },

      /**
       * Toggles modal open/closed
       */
      toggle: function () {
        this[this.visible ? 'close' : 'open']()
      }
    }
  }

</script>


<style lang="scss">

  @import '../../node_modules/magnific-popup/src/css/main.scss';

  .mfp-content {
    text-align: center;
  }

  $module: '.Modal';
  #{$module} {
    display: inline-block;
    position: relative;

    &__inner {
      display: inline-block;
      text-align: left;
    }

    .mfp-close {
      width: auto;
      height: auto;
      font-size: 2em;
      line-height: 1;
      position: absolute;
      top: auto;
      right: auto;
      bottom: 100%;
      left: 100%;
      color: #fff;
      opacity: 1;
    }
  }

</style>

SomeOtherComponent.vue

<template>
  <div>

    <!-- 
    :show prop (optional) dictates whether modal will show immediately
    :config prop (optional) takes an object of MagnificPopup config options
    -->
    <magnific-popup-modal :show="true" :config="{closeOnBgClick:false}" ref="modal">

      <!-- Put whatever content you want in here -->
      <div style="background: white; padding:0.25em 1em;">
        <p>Some modal content.</p>
      </div>
      
    </magnific-popup-modal>

    <button @click="openModal">Open Modal</button>

  </div>
</template>


<script>
  import MagnificPopupModal from './MagnificPopupModal'

  export default {
    name: 'profile',
    components: {MagnificPopupModal},

    methods: {
      openModal () {
        this.$refs.modal.open()
      }
    }
  }
</script>


<style scoped>

</style>

Hi, Thank you for this.

How to modify this so that I can have multiple popups/triggers on the same page?

Hi, Thank you for this.

How to modify this so that I can have multiple popups/triggers on the same page?

You can add "src" attribute to config in modal component and the id prop that will be unique for every modal

config: { items: { src: '#' + this.id, }, }