Get template attributes/props per slot

[JulianWowra]

Hello,
I haven't found any documentation or or other persons with similar intentions.

I want to build a tab component where I can assign properties like icons to the tabs (templates) directly. It is best explained with an example:

App.vue

<template>
    <ComponentTabs> <!-- <== Props **not** here -->
      <template #star title="Star"> <!-- <== Attributes (props) here -->
        <h3 class="text-gray-900 text-lg dark:text-gray-100">🌟</h3>
      </template>

      <template #sun title="The sun goes up" :icon="dynAttr"> <!-- <== Attributes (props) and here -->
        <h3 class="text-gray-900 text-lg dark:text-gray-100">🌞</h3>
      </template>

      <template #moon title="The moon goes down" icon="moon" disabled> <!-- <== Attributes (props) and here -->
        <h3 class="text-gray-900 text-lg dark:text-gray-100">🌜</h3>
      </template>
    </ComponentTabs>
</template>

<script lang="ts" setup>
const dynAttr = ref('sun')
</script>

ComponentTabs.vue

<template>
  <div>
    <!-- Navigation - Template attributes are need here -->
    <nav>
      <a v-for="slot of slotsWithAttrs">
        <span>{{ slot.attrs.icon || '' }}</span>
        <span>{{ slot.attrs.title }}</span>
      </a>
    </nav>

    <!-- Tab content - Slot passed here -->
    <div>
      <slot :name="activeSlot.name"></slot>
    </div>
  </div>
</template>

How can the arguments be processed in the component? How can you establish type safety (TypeScript)?
In my opinion, creating a component that receives the props is not the solution. Or what do you think?

I will be happy to provide you with a minimal reproduction of the actual state. Vue Playground

---

Original question: nuxt/nuxt#30033
Related: https://github.com/orgs/vuejs/discussions/10282

[Wei-Ba]

....emmm, like this? demo

[JulianWowra]

Looks perfect. Thank you for your input! 🎉