Open in Stackblitz

npm i https://pkg.pr.new/vuejs/language-tools/vue-component-meta@5137

npm i https://pkg.pr.new/vuejs/language-tools/vue-component-type-helpers@5137

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-core@5137

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-plugin-pug@5137

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-server@5137

npm i https://pkg.pr.new/vuejs/language-tools/vue-tsc@5137

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-service@5137

npm i https://pkg.pr.new/vuejs/language-tools/@vue/typescript-plugin@5137

commit: 4b9cfdc

Awesome!!

If only text content is expected in a slot, how would one type that? I tried numerous things:

const slots = defineSlots<{
  default?: () => HTMLElement;
}>();

const slots = defineSlots<{
  default?: () => Text;
}>();

const slots = defineSlots<{
  default?: () => string;
}>();

I tried all of these separately, but text content in a slot is typed as [], so all of these actually fail. Does [] indicate: no HTML elements or components? So is this the correct form? It works, but it does look a bit weird...

const slots = defineSlots<{
  default?: () => [];
}>();

We currently do not generate virtual code for text nodes, so this cannot be type checked yet. You can indeed use [] to indicate that no native elements or components are accepted.

Hmm that's too bad, because even though this is a very very welcome addition, it's not entirely strict that way. See, you can do this without getting any TS errors:

LoadingSpinner.vue

<template>
  <div class="loading-spinner">
    <slot><span>Loading...</span></slot>
  </div>
</template>

<script setup lang="ts">
  const slots = defineSlots<{
    default: () => [HTMLElement]
  }>();
</script>

dashboard.vue

<LoadingSpinner v-if="loading">
  <span></span>Loading dashboard...
</LoadingSpinner>

It's not the perfect example, but I think you understand what I mean. Strictly speaking, the slot children are wrong here, while the types state they're fine.

I also noticed that even though you state the slot children should be [HTMLSpanElement], it accepts any other html tag in there anyway. So you can't really narrow down what type of html elements can be used as slot children.

Probably also good if this new feature is documented a little more extensively on the Vue website. The new defineSlots syntax isn't documented yet either on vuejs.org, right now. Do you know if someone is working on that? I didn't read any announcements for this new syntax (which also seems to be available without strictSlotChildren: true) anywhere either.

This syntax is documented:

<script setup lang="ts">
const slots = defineSlots<{
  default(props: { msg: string }): any
}>()
</script>

This one isn't:

<script setup lang="ts">
const slots = defineSlots<{
  default: (props: { msg: string }) => [HTMLElement]
}>()
</script>

Sorry if I should have created issues instead of replying on your pull request!

After discussing with other members, we think that this feature is not yet perfect. We hope to eventually achieve an effect similar to renders in Flow, which requires cooperation with core. You can express your opinions on vuejs/rfcs#733 to promote the progress of this proposal.

Oh I see! So it's experimental? Will the syntax change in the future? Because in that case, probably good to mention that in the Wiki too.

You are right. I'll consider making this feature experimental for now.

Thanks, good idea. By the way, as an outsider, it was not very clear what every vueCompilerOptions option does. Maybe some before/after code examples per option would help clarify what exactly every option does. Like, I tried inferComponentDollarRefs: true, but I really don't know what changed after turning it on.

It also seems like the deepwiki is outdated about this topic: https://deepwiki.com/vuejs/language-tools/2.2-typescript-integration#vue-compiler-options

I cannot find out how to suggest changes to the wiki or make a PR for it, so I created a discussion for it here: #5509

Note that I'm still working on it, but accidentally submitted the discussion already (😅), so I'll add more to it in the following hours.