I want to implement a carousel component in Nuxt v3. This component receives a list of items. This component only implements logic, not style or structure.
Now this is my component:
Component/tdx/carousel.vue
The logic of the carousel is not important here.
In the parent component I can use the component like this:
{{ title }}
{{ description }}
This works great. Other than that what I want is typing. The type oftitleanddescriptionis of course any, because in the props ofcarousel.vue, the type of the item isunknown[].
I found this article showing how to make a generic component, but I don't want this because I have to mess with nuxt's auto-import system.
How to implement type inference from a given item in acarousel.vueproperty?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Updated: May 2023
Starting from Vue 3.3,officially supports common components.
You need to define a common parameter. Modify the
carousel.vuecomponent to use thegenerictag and convert it to use type-baseddefinePropsmethod so that it gets the generics correctly.Props on slots will now be correctly inferred based on item type.
Before May 2023
In earlier versions of VSCode/Volar, you needed to enable theExperimental flag. It requires the
experimentalRfc436option of tsconfig.json to be enabled undervueCompilerOptions.// tsconfig.json { // ... "vueCompilerOptions": { "experimentalRfc436": true } }This is no longer necessary as it is enabled by default in recent versions of Volar.