I have a requirement to use vue js slot to inject the content anywhere in the dom.
The component is going to have props as below -
1. in: The target element. Should be able to accept a string selector, or an element as object.
2. as: Defines one of the insert modes: (append, prepend, replace, fill)
I am still looking for solution how the slot will be rendered in the given selector and inserted as per given insert mode. Below is my slot component -
MySlotComponent.vue:
<script>
export default {
props: {
in: {
type: [String, Object],
default: 'body'
},
as: {
type: String,
default: 'append'
}
},
render(h) {
return this.$scopedSlots.default();
},
}
</script>