so11y / dynamic-slot

This Vue 3 directive enables you to inject and insert content into specific locations of a component, even if the component does not have defined slots. With this directive, you can dynamically insert plugins regardless of whether slots are present or not

dynamic-slot

This Vue 3 directive enables you to inject and insert content into specific locations of a component, even if the component does not have defined slots. With this directive, you can dynamically insert plugins regardless of whether slots are present or not

<template>
  <div>
    <Comp v-dynamicSlot.default="find">
      <template v-slot:default>
        <div>{{ v }}</div>
      </template>
    </Comp>
  </div>
</template>

<script setup lang="ts">
  import { VNode } from "vue";
  function find(vnode: VNode) {
    return {
      //Insert children subscript for reference
      referIndex: 1,
      //DynamicChildren Parent Box
      originInsetParentVnode: vnode,
    };
  }
</script>

For more examples, see project example

Online Example (pnpm run view)[https://stackblitz.com/github/so11y/dynamic-slot]