all slots end up in default slot when mixing TSX and SFC

[julisch94]

Hello everyone,

I feel sorry to be asking this question but I'm afraid I can't find any instructions how to use named slots with JSX in the docs.

Context:

We're in the middle of an effort to move from JSX files (*.tsx) to Single-File-Components (*.vue). The current status is a mix of tsx and vue files - especially tsx files making use of components that have already been migrated.

My issue:

I can't figure out how to make use of named slots that are defined inside vue files.
MyChild.vue component would be:

<script setup></script>

<template>
  <div>
    <h2>Child</h2>

    <span style="color: orange">
      <slot name="default"></slot>
    </span>
    <span style="color: blue">
      <slot name="foo"></slot>
    </span>
  </div>
</template>

and my parent App.tsx component would be:

import { defineComponent } from 'vue';
import Child from './Child.vue';

export const App = defineComponent({
  setup() {
    return () => (
      <Child>
        <p slot="foo">I am in the foo slot</p>
        <p slot="default">Here is the default</p>
      </Child>
    );
  },
});

but even though I'm passing the different <p> into different slots, they both end up in the default slot. See this screenshot, the font color is orange for both:

I just can't figure this out. Please help!

Reproduction:

I'm happy to provide you with a minimal reproduction:
https://stackblitz.com/edit/vue3-tsx-c3i6kp?file=src%2FApp.tsx

[Yordan-Ramchev]

{{
  default: () => <p>Here is the default</p>,
  foo: () => <p>I am in the foo slot</p>,
}}

App.tsx component is not using proper JSX/TSX syntax. Here is working example > https://stackblitz.com/edit/vue3-tsx-vc8vsd?file=src%2FApp.tsx

---

Reference: https://github.com/vuejs/babel-plugin-jsx?tab=readme-ov-file#slot

[julisch94]

thank you a lot, now I understand how it works

[XiaoYuJuQiang]

https://vuejs.org/guide/extras/render-function.html#passing-slots

[julisch94]

omg yesss. how could I miss that? thank you!