How to Programmatically append slots in vuejs app

Viewed 162

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>
0 Answers
Related