Vue modules not found when importing in a Typescript file

Question

I have a Vue project that uses single file class component and typescript loader. I use VS Code with the Vetur plugin to get very nice code completion inside single file .vue components. This works fine except in my entry.ts file, where I create the root Vue component:

In entry.ts, I cannot import vue modules!

index.ts

import Vue from 'vue'                       // this is ok
import App from './components/app.vue'      // vue file not found!
new App({el : '#app'})

ERROR Cannot find module './components/app.vue

app.vue

<script lang="ts">
    import Vue from 'vue'                       // this is ok
    import Card from "./card.vue"               // here it works!

    export default class App extends Vue {
    }
</script>

From a .vue file, I can import other .vue modules.

I have tried leaving out the .vue extension, but that has the same result.

I have tried adding the .vue extension to a .d.ts file, but that messes up the Vetur plugin, and reverses the problem (modules only work from .ts files but not from .vue files)

Answer 1

Hi Typescript gives you that error because It doesn't know what .vue file is.

But there's a work around for it.

In your project directory you can add a file called vue-shims.d.ts

Inside put the following code:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Now typescript will understand .vue files.