npm:vue-mountable

README

Vue Mountable

Vue Mountable is a tiny DOM Library for Vue 3.

Features

• Native Vue 3 Teleport
• Slotting, Events & Props
• use inject and provide
• Mount multiple Children Components
• Mount HTML Tag's
• Support for defineComponent and defineAsyncComponent
• Support for multiple Vue Instances
• Hot-Module Reloading for vite

Usage

Install

npm i vue-mountable -D

Add it to main.js

import { VueMountable } from 'vue-mountable'

// created vue instance
app.use(VueMountable());

Getting Started

// main.vue

<script>
import { useComponent } from 'vue-mountable';
import test from 'components/test.vue';

export default {
    setup() {
        const { mount, destroy } = useComponent();

        function addTest() {
            mount(test, {
                props: {
                    message: 'This is a Test Component'
                }
            });
        }

        return {
            addTest
        }
    }
}
</script>

// test.vue
<template>
    <div ref="test">
        {{ message }}

        <button @click.prevent="close">
            Remove Test Component
        </button>
    </div>
</template>

<script>
import { useComponent } from 'vue-mountable';

export default {
    name: 'test', // this needs to be defined
    props: {
        message: String
    },
    setup() {
        const test = ref(null); // template ref
        const { destroy } = useComponent();

        function close() {
            destroy(test.value);
        }

        return {
            close
        }
    }
}
</script>

Examples

Tiny List of what you can do with Mountable:

Configuration

Current available Function Parameters:

const {
    mount, // mount function
    destroy, // destroy function
    destroyAll, // destroy all mounted elements
    id // current app instance id
} = useComponent();

mount(
    /**
     * Vue Component File
     * needs to have the "name" attribute
    */
    component,
    {
        /**
         * Native Vue Props
         */

        props: {},

        /**
         * Vue Children Components
         * Array with Vue Components or Object array with Mount Options: component, children, props, target, slot
         * @props {}
         * @children []
         * @target string
         * @slot string
         */
        children: [],

        /**
         * Teleportation Target
         * Can be defined in the loaded component or here
         * Note: If the component has a target prop, it will override this option
         * String referencing an DOM Target
         */
        target : ''
    }
);

destroy(
    /**
     * DOM Element
     */

    element
);

Limitations

At the Moment the useComponent Function is only available in the setup Lifecycle. This is due to the usage of inject/provide from Vue 3. Also there is no Devtools Support, but its in the works! That means added Components wont be visible in Devtools for now..

vue-mountable

Usage no npm install needed!