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?

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😉.

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

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.

It's coming to Vue 3.3, it seems.

#7982

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 })