vue-simple-portal/dist/vue-simple-portal.js

Simple portal component for Vue.js

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
	typeof define === 'function' && define.amd ? define(['vue'], factory) :
	(global.SimplePortal = factory(global.Vue));
}(this, (function (Vue) { 'use strict';

Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

var index = {
  name: 'simple-portal',

  props: {
    target: {
      type: String,
      required: true
    },

    // The name option for mounted portal component
    componentName: {
      type: String,
      default: 'portal-target'
    }
  },

  mounted: function mounted() {
    var ref = this.$vnode.data;
    var staticClass = ref.staticClass;
    var className = ref.class;
    var attrs = ref.attrs;
    var children = this.$slots.default;

    this.targetEl = document.getElementById(this.target);
    this.childEl = document.createElement('div');
    this.childEl.id = this.componentName;
    this.targetEl.appendChild(this.childEl);
    this.childVm = new Vue({
      name: this.componentName,
      abstract: true,
      parent: this,
      render: function render(h) {
        return h('div', { staticClass: staticClass, class: className, attrs: attrs }, children)
      }
    });

    this.childVm.$mount(this.childEl);
    this.childEl = this.childVm.$el;
  },

  beforeDestroy: function beforeDestroy() {
    this.childVm.$destroy();
    this.targetEl.removeChild(this.childEl);
  },

  render: function render() {
    return this.$slots.placeholder
  }
};

return index;

})));