Search code examples
typescriptvue.js

How do I setup a vue slot type as a simple string not a component

I want to be able to pass a string as a slot into a vue component. Define on the vue component that the slot is supposed to be a string and then use that string both in the template and in the script tags. There is a defineSlots function in the docs but every single example just keeps showing how to use it with objects like this enter image description here

Source: https://vuejs.org/api/sfc-script-setup.html#defineslots

I want to do something like this. enter image description here

But this doesnt seem to work. Surley there has to be a way to define a slot on vue thats just a plain string?

Heres a stackblitz that shows pretty clearly what Im trying to do and what I want.

https://stackblitz.com/edit/vitejs-vite-mouih9?file=src%2FApp.vue,src%2FSlotsButton.vue&terminal=dev

Solution

  • Unfortunately Vue doesn't support typing slot content:

    The return type is currently ignored and can be any, but we may leverage it for slot content checking in the future.

    https://vuejs.org/api/sfc-script-setup.html#defineslots

    Also note that slots are much slower than props