Nuxt•4mo ago

Typescript Error with dynamic slots.

Hi everyone, I recently updated my project and while the app is still functioning, I'm encountering a TypeScript (tsc) error. I'm familiar with this type of error when it comes to objects and dynamic indexes in TypeScript, but I'm not sure how to resolve it in the context of slots. Has anyone else faced a similar issue or can provide some guidance on how to fix this? Thanks for your help!

<script setup lang="ts" generic="T extends EntityInterface">
  import type {EntityInterface} from '~/types/entity'
  import type {ReadonlyHeaders} from '~/types/headers'

  interface Props {
    headers?: ReadonlyHeaders
    data: Array<T>
    loading: boolean
  }

  withDefaults(defineProps<Props>(), {
    loading: false,
  })

  const slots = useSlots()

  const slotKeys = computed(() => Object.keys(slots))

</script>

<template>
  <VDataTable   
    :headers="headers"
    :items="data"
    :loading="loading"
    class="elevation-1"
  >
    <template
      v-for="key in slotKeys"
      #[`item.${key}`]="props"
      :key="key"
    >
      <slot
        :name="key"
        v-bind="props"
      >
        {{ props.value }}
      </slot>
    </template>
  </VDataTable>
</template>

<style scoped></style>

<script setup lang="ts" generic="T extends EntityInterface">
  import type {EntityInterface} from '~/types/entity'
  import type {ReadonlyHeaders} from '~/types/headers'

  interface Props {
    headers?: ReadonlyHeaders
    data: Array<T>
    loading: boolean
  }

  withDefaults(defineProps<Props>(), {
    loading: false,
  })

  const slots = useSlots()

  const slotKeys = computed(() => Object.keys(slots))

</script>

<template>
  <VDataTable   
    :headers="headers"
    :items="data"
    :loading="loading"
    class="elevation-1"
  >
    <template
      v-for="key in slotKeys"
      #[`item.${key}`]="props"
      :key="key"
    >
      <slot
        :name="key"
        v-bind="props"
      >
        {{ props.value }}
      </slot>
    </template>
  </VDataTable>
</template>

<style scoped></style>

2 Replies

Beliol•4mo ago

Which version of Nuxt are you using? I encountered the same error with Nuxt v3.12.4. I switched to Nuxt v3.12.2, and it worked. If you have an Import error, i created a file "shims-vue.d.ts" with this code in it :

declare module '*.vue' {
    import { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

declare module '*.vue' {
    import { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

Laurent.COP•4mo ago

Thanks, I've tried with different versions of Vuetify, but it seems the problem appears with 3.12 of Nuxt. :nuxt: Does @manniL / TheAlexLichter or anyone on the maintainer team know about this ?

Gaming

Programming

Typescript Error with dynamic slots.