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)

Chanlito · Accepted Answer · 2017-12-01 06:50:26Z

6

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.

answered Dec 1, 2017 at 6:50

Chanlito

2,5423 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kokodoko Over a year ago

Thanks, but that .d.ts file causes glitches with the Vetur plugin (which is needed to work with .vue files). intellisense becomes very glitchy and module paths are not recognised anymore in Vetur after I add the type definition file.

Douglas Gaskell Over a year ago

Even with this it doesn't work, it can't even import non-ts .vue files in. And it's selective, some files work, some don't.

rjurado01 Over a year ago

If you uses Vue3, you have to import: import type {DefineComponent} from 'vue' and export const component: DefineComponent<object, object, any>; export default component

Collectives™ on Stack Overflow

Vue modules not found when importing in a Typescript file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related