Allow components passed as slot prop to be used in the slot

[Fuzzyma]

What problem does this feature solve?

Example:

<template>
  <SomeComponent v-slot="{ SpecializedComponent }">
    <SpecializedComponent />
  </SomeComponent>
</template>

At the moment, vue does not consider components passed as slot property on render. Instead it complains about "SpecializedComponent" being unknown.

Why is this useful:

1. Allow to render parent-child relationships in an easy way:

This basically allows to wrap the inner content of a parent component with some custom styling or whatnot. A similar concept is used in vue-router to display the current page (<router-view>)

<template>
  <Table>
    <template #td="{ Child }">
      <td style="background: red">
        <Child />
      </td
    </template>
  </Table>
</template>

2. Allow typed components that rely on props passed to the parent component

<template>
  <Table :data="typedData" v-slot="{ Column }">
    <Column prop="willErrorWithWrongKey" />
    <Column v-slot="{ row }">
      {{ row.typedProperties }}
    </Column>
  </Table>
</template>

Both cases are extremely useful for different reasons

What does the proposed API look like?

See above or look at this playground

[Alfred-Skyblue]

Maybe you should use dynamic components rendering?

 <Table v-slot="{ Column }">
    <component :is="Column"></component>
  </Table>

[Fuzzyma]

@Alfred-Skyblue yes, this would work, but it gets kinda cumbersome and is very unintuitive. Usually you can just use any variable from your script section and render it as a component. Why the limitation for slotprops? The developer usually doenst know the internals and assumes that it just works "the same"

// EDIT: I just tested it, and it doesnt show it. In fact, its not visible anywhere (no console warnings, nothing in the html). Weird

[jacekkarczmarczyk]

it does show when i tested it in your playground

[Fuzzyma]

You are right. This has to be a user error on my site then ^^

[Fuzzyma]

So it seems like Svelte 5 introduced a feature where capitalized variables can be rendered as component (found it on twitter: https://x.com/joyofcodedev/status/1820097509538070952).

Maybe that would be a solution for slotProps in vues case. Even tho it would be a hell of a special case. Nevertheless wanted to write it down as a potential solution

[crutchcorn]

I'm running into this same problem while trying to adapt this pattern to Vue from TanStack Form. Repro:

https://stackblitz.com/edit/vue-v-slot-comp-map-bug-repro?file=src%2FApp.vue

This would be great to get unblocked.

[Fuzzyma]

@crutchcorn https://deploy-preview-13573--vue-sfc-playground.netlify.app/#eNqVU01PwzAM/StWLlygPcCpFCRAHEDiQ8Axl6gzXViaREnaDU377zjp2nUTH+LUxH6xn59f1+zK2qxrkRWs9JWTNoDH0FpQQtcXnAXP2SXXsrHGBXjSCO/ONHCU5XSOD4/Ox+yrMuHZmU7O0I2waXDAc10Z7QMIa29MYx+EhQtYcw1gNBaxyzHXGwKWec+JGNAlYGOVCEg3gNKmD0R0rAsVVaLnOoA2S3CoqaGnqHNYBaU+Icydaes5iAm0odZKLhC8KVLVvC9b7qhlhIR86HmlZyCUN9BJAdYZ68cne+N3J56uJOA6dYsjbpKSkXK5DU1L7wlFoTKfjMuOaRGk2bussw9vNG0rycVZrCQVuicbJGnKWdELGXNCKbO8T7Hg2qhpH6/mWC2+iX/4VYxx9uzQo+uQszEXhKsx9Onb10dc0XlMNmbWKkL/knxBb1QbOfaw61bPiPYEl9jeJSdJXb/521VA7YehItGI3CQ8Z7TxuJ+fRt/RPc3O0jsyFKm4NUt0+ygvxSZiE+jQsof/xp//w+DvYfP/N3c0DxTb9+Si7YmzZJd9b2y+AFCPRtY=

[madsh93]

As a Tanstack and Vue user, it would be great life improvement if this was possible.

[mkeyy0]

I also use tanstack/form, and this feature is very missing to be honest, would be nice to have! Also, if you use <component :is /> and TypeScript, you don't have any type definitions for your component, which is a big downside

[Angelovsky]

Would be great to have this on the Vue side, as it's currently blocking some needed features around composition and type inference for us.