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..
