How to remove .vue extension from imports when using TypeScript in Vue.JS?

Question

I created a project with vue-cli3 and included TypeScript

My src/app.vue:

<template>
  <div id="app">
    <hello-world msg="test"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld';

@Component({
  components: { HelloWorld },
})
export default class App extends Vue {}
</script>

the compiler throwing an error in "Cannot find module '@/components/HelloWorld'";

The component HelloWorld exists.

However, if I remove the lang="ts" or add the .vue extension then everything compiles fine. In my tsconfig.json, i have

  "paths": {
    "@/*": [ "src/*" ]
  },

Is it an issue with tsconfig.json or something else?

Answer 1

In your sources root folder you probably have a file named shims-vue.d.ts with contents like these:

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

What this file does is tell the Typescript compiler that all files ending in .vue have the Vue type. Otherwise, those files have no type and Typescript cannot work with them.

This is why you need the .vue extension: if you remove it, Typescript doesn't know the type of the file and can't compile. So, in short, the answer is that you can't remove the extension.

More advanced answer:

Theoretically, you can remove the extension, but you would need to declare the module shim with a different expression. For example, you could tell Typescript that all the files in a folder have the Vue type. This is, however, way worse than just shimming the .vue extension, which is the recommended default.