How to add types to render function slots?

[ChrisGV04]

I've been searching for a while but I just can't seem to find how to do this...

I have a component that I build using the defineComponent render function and I want to add multiple slots to that component. It looks something like this:

export default defineComponent({
// ...
  setup(props, { slots, attrs }) {
    const text = props.text.toString();
    const split = text.split(highlightRegex); // Split all of the brackets. Each 2n element must be highligthed

    const children = split.map((content, index) => {
      const isHighlight = (index + 1) % 2 === 0;
      if (!isHighlight) return content;
      if (slots.highlights) return slots.highlights({ content });
      return h('span', { class: 'highlight' }, content);
    });

    return () => h(props.as, { ...attrs }, children);
  },
// ...
});

Is there a way to explain to typescript that this component has a highlights named slot with content as a scoped prop? I'm not getting the usual Intellisense when I use the component somewhere else:

<template>
  <HighlightText text="My [highlighted] text">
    <template #highlights="{content}">
      <span class="highlight">{{ content }}</span>
    </template>
  </HighlightText>
</template>

I know that If I add named slots on a SFC component, Volar correctly types the slots and I get Intellisense when I use that component somewhere else.

[liulinboyi]

Can you provide a minimum reproduction in sfc or repository😉? Thanks!

[ChrisGV04]

Hi! I can't share the full repo since it's still under private development, but I can share the specific component I'm building.

I basically have a HighlightText.ts component inside of a basic Nuxt@3.3.1 which I built using the render function methodology with Typescript. It accepts an as props to render the parent element as that tag (example: as="h1") and a text prop for any kind of text content. What the component does is it takes all of the strings that are between brackets [] and wraps them under any kind of element you want so that you can highlight those parts of the text prop.

Here's that component under components/HighlightText.ts:

export default defineComponent({
  name: 'HighlightText',

  props: {
    text: { type: String, required: true },
    as: { type: String, default: 'span' },
  },

  setup(props, { slots, attrs }) {
    // Split all of the brackets. Each 2n element must be highligthed
    const highlightRegex = /\[(.*?)\]/g;
    const split = props.text.split(highlightRegex);

    const formatted = split.map((content, index) => {
      const isHighlight = (index + 1) % 2 === 0;
      // If is not highlighted text, return the raw text
      if (!isHighlight) return content;

      // If user provided a #highlights slot, render the highlights
      // using that template and pass it the content as a slot prop
      if (slots.highlights) return slots.highlights({ content });

      // If no #highlights slot was provided, render as a default
      // span with the .highlight class
      return h('span', { class: 'highlight' }, content);
    });

    return () => h(props.as, { ...attrs }, formatted);
  },
});

And here's a basic usage example inside of the pages/index.vue SFC page file of my Nuxt 3 app:

<script setup lang="ts"></script>

<template>
  <HighlightText as="h1" text="My [awesome] text goes [here]">
    <template #highlights="{ content }">
      <span class="text-emerald-500">{{ content }}</span>
    </template>
  </HighlightText>

  <!-- Expected output 👇 -->
  <h1>
    My <span class="text-emerald-500">awesome</span> text goes <span class="text-emerald-500">here</span>
  </h1>
</template>

The problem

The problem is that my HighlightText.ts component uses the render function methodology and it checks for the slots.highlights slot so that it can render the highlights with that format. However, when I try to use the component inside of the index.vue SFC file, I don't get any Intellisense when writing the slot. Here's a short video:

vue-slot-intellisense-missing-demo.mov

What I expect

So I just would like to get the slot intellisense on that component built with render functions and not with SFC. Is it possible?

[liulinboyi]

Hi! I can't share the full repo since it's still under private development, but I can share the specific component I'm building.

I basically have a HighlightText.ts component inside of a basic Nuxt@3.3.1 which I built using the render function methodology with Typescript. It accepts an as props to render the parent element as that tag (example: as="h1") and a text prop for any kind of text content. What the component does is it takes all of the strings that are between brackets [] and wraps them under any kind of element you want so that you can highlight those parts of the text prop.

Here's that component under components/HighlightText.ts:

export default defineComponent({
  name: 'HighlightText',

  props: {
    text: { type: String, required: true },
    as: { type: String, default: 'span' },
  },

  setup(props, { slots, attrs }) {
    // Split all of the brackets. Each 2n element must be highligthed
    const highlightRegex = /\[(.*?)\]/g;
    const split = props.text.split(highlightRegex);

    const formatted = split.map((content, index) => {
      const isHighlight = (index + 1) % 2 === 0;
      // If is not highlighted text, return the raw text
      if (!isHighlight) return content;

      // If user provided a #highlights slot, render the highlights
      // using that template and pass it the content as a slot prop
      if (slots.highlights) return slots.highlights({ content });

      // If no #highlights slot was provided, render as a default
      // span with the .highlight class
      return h('span', { class: 'highlight' }, content);
    });

    return () => h(props.as, { ...attrs }, formatted);
  },
});

And here's a basic usage example inside of the pages/index.vue SFC page file of my Nuxt 3 app:

<script setup lang="ts"></script>

<template>
  <HighlightText as="h1" text="My [awesome] text goes [here]">
    <template #highlights="{ content }">
      <span class="text-emerald-500">{{ content }}</span>
    </template>
  </HighlightText>

  <!-- Expected output 👇 -->
  <h1>
    My <span class="text-emerald-500">awesome</span> text goes <span class="text-emerald-500">here</span>
  </h1>
</template>

The problem

The problem is that my HighlightText.ts component uses the render function methodology and it checks for the slots.highlights slot so that it can render the highlights with that format. However, when I try to use the component inside of the index.vue SFC file, I don't get any Intellisense when writing the slot. Here's a short video:

What I expect

So I just would like to get the slot intellisense on that component built with render functions and not with SFC. Is it possible?

It seems only the component use setup in script will has the slot intellisense in Visual Studio Code, for now.
I currently have no good way, let's see if others have any good way😉.

[ChrisGV04]

Oh, okay. Hopefully somebody knows how to do it or if it's even possible.
Thank you very much! 😄

[pawel-omniaz]

I have the same problem, didn't found the solution :/ Maybe we need something like defineSlots() or slots property in defineComponent options to define slots some way similar to emits... But I'm not JS/TS expert :D

[ChrisGV04]

Yeah, I also thought that there would be a slots property inside the defineComponent function similarly to how we define the props, but for now that doesn't seem to be the case.

[leopiccionia]

It's coming to Vue 3.3, it seems.

#7982

[n0099]

b6d421c

const Quux: FunctionalComponent<
  {},
  {},
  {
    default: { foo: number }
    optional?: { foo: number }
  }
> = (props, { emit, slots }) => {
  expectType<{
    default: (scope: { foo: number }) => VNode[]
    optional?: (scope: { foo: number }) => VNode[]
  }>(slots)

  slots.default({ foo: 123 })
  // @ts-expect-error
  slots.default({ foo: 'fesf' })

  slots.optional?.({ foo: 123 })
  // @ts-expect-error
  slots.optional?.({ foo: 'fesf' })
  // @ts-expect-error
  slots.optional({ foo: 123 })