How to Programmatically append slots in vuejs app

  laravel, laravel-vue, vue-component, vue.js

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>

Source: Laravel

Leave a Reply