When I create a script as typescript (lang="ts") I get an error stating
"Cannot find module './components/Navigation' or its corresponding type declarations (Vetur 2307).".
I realized that this only happens when I set the lang as ts, which is what I need to build my Vue application.
app.vue
<template>
<Navigation />
</template>
<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message
export default {
name: 'app',
components: {
Navigation,
}
}
</script>
Navigation.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/categories">Categories</router-link>
<router-link to="/random">Random</router-link>
</div>
<router-view />
</template>
<script lang="ts">
export default {
name: 'Navigation',
}
</script>
In the src
folder add the file shims-vue.d.ts
with the following content :
Vue 2 :
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Vue 3:
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
and import the component with its extension .vue
:
import Navigation from './components/Navigation.vue';
instead of :
import Navigation from './components/Navigation';