Portal plugin for Vue.js using Vue observable.

Portal.js

/**
 * A Portal Plugin for Vue.js, to render components
 * outside of other components, anywhere in the document.
 *
 * @plugin
 * @example
 * Vue.use(PortalPlugin);
 * {
 *   computed: {
 *     portalTarget() {
 *       return this.$portal.getTarget();
 *     },
 *   },
 *   methods: {
 *     showFailNotice() {
 *       this.$portal.setTarget({ template: '<div>Aw, Snap!</div>' });
 *     },
 *   },
 *   template: `
 *     <div class="portal">
 *       <component :is="portalTarget"></component>
 *     </div>
 *   `,
 * }
 */
const PortalPlugin = {
    install(Vue) {
        const state = Vue.observable({
            component: {},
        });

        const hasKeys = (obj) => {
            return obj !== null && typeof obj === 'object' && Object.keys(obj).length;
        };

        const actions = {
            setTarget(component) {
                state.component = component;
            },
            getTarget() {
                return hasKeys(state.component) ? state.component : null;
            },
        };

        Vue.prototype.$portal = actions;
    },
};