Hey fellow developers! I'm currently working on a Vue2 setup with Nuxt and Typescript. I'm facing an issue while trying to install the awesome vue-slick-carousel module via yarn. When attempting to import the module in my component, Typescript throws an error: "Cannot find module 'vue-slick-carousel' or its corresponding type declarations". As someone new to Typescript, I could really use some guidance!
<script lang="ts">
import Vue from 'vue'
import { VueSlickCarousel } from 'vue-slick-carousel'
export default Vue.extend({
components: {
VueSlickCarousel
}
...
})
</script>
This is what I have in my tsconfig.json file:
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types",
"nuxt-i18n"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
In addition, I have a vue-shim.d.ts file, but I'm unsure about what needs to be included there:
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$i18n: {
locale:string,
locales:{code:string, name:string, file:string}[]
}
}
}
The root cause seems to be Typescript's inability to locate the module types. I came across a library named "@types/slick-carousel" which provides the necessary types, but I'm unsure about the next steps. Do I need to manually define these types?