typescriptvuejs3vitevuejs-slotsvue-tsc

Vue 3 Dynamic Slots causes error TS2339 on vue-tsc


I have a tab component in a vue 3 (3.5.12) typescript project. The tabs accept a prop called nav which might look something like this:

const nav = ref([
        {
            id: 'about',
            name: 'About',
        },
        {
            id: 'enquire',
            name: 'Enquire',
        },
    ])

For each of the nav items, we generate a slot with a simple sequential naming system for the content.

<div v-if="nav" class="tabs-content">
    <div
        v-for="(tab, index) in nav"
        :id="tab.id"
        :key="index"
        <slot :name="`tab${index + 1}`"></slot>
    </div>
</div>

giving us tab1 and tab2 slots. which means we can populate the tab content like so:

<template #tab1></template>

However when running the build command, vue-tsc throws the error:

error TS2339: Property 'tab1' does not exist on type 'TabsSlots'.

The vue docs have a section on this, but its not very in-depth: https://vuejs.org/api/sfc-script-setup.html#defineslots and all of my attempts with this have been unsuccessful.

I have ensured typescript, vue, vue-tsc packages are all up to date

All of my approaches so far were an attempt to register the dynamic slots based on the nav prop, the same way that the slots themselves are created.

Does anyone have a solution to this? I cannot find anything for this specific issue on StackOverflow and AI tools seem to be struggling with defineSlots being a newer feature.

See Vue SFC Playground Demo here


Solution

  • I can't believe I am writing this but... it was because the component is called "tabs". I changed it to "AppTabs" and intellisense immediately accepted the dynamic slots and the errors no longer appeared in vue-tsc.