I am looking to incorporate a carousel component into Nuxt v3. The component will be passed an array of items, focusing solely on the logic without handling styling or structuring.
Currently, this is what my component looks like:
components/tdx/carousel.vue
<template>
<div>
<slot name="last"></slot>
<div v-for="item in items">
<slot
name="item"
v-bind="item"
></slot>
</div>
<slot name="next"></slot>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
items: {
type: [],
required: true,
},
spotlight: {
type: Number,
default: 1,
validator(value: number) {
return value > 0;
},
},
});
</script>
The specifics of the carousel's logic are not crucial at this point.
In the parent component, I can utilize the component as follows:
<template>
<div class="container">
<TdxCarousel :items="exampleArray">
<template #item="{ title, description }">
<p class="font-semibold text-2xl">{{ title }}</p>
<hr />
<p>{{ description }}</p>
</template>
</TdxCarousel>
</div>
</template>
<script setup lang="ts">
const exampleArray = ref([
{
title: 'Item 1',
description: 'Desc of item 1',
},
{
title: 'Item 2',
description: 'Desc of item 2',
},
]);
</script>
Although this setup works well, I am aiming to include typings for better code clarity. As the types of title and description are currently set to any due to the items' type being unknown[] in the props of carousel.vue.
I came across this article demonstrating how to create a generic component, but I prefer to avoid it as it could interfere with nuxt's auto import system.
Is there a way to infer types from the provided items in the carousel.vue props without resorting to generics?