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?

Lasalle

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.

Schargel

Answer 2

True to add .vue at the end of every vuejs component when is imported.

`import HelloWorld from '@/components/HelloWorld';

should be:

 import HelloWorld from '@/components/HelloWorld.vue'

Footstalk

the question asks "how to remove .vue extension" – Lasalle

Answer 3

You need to install awesome-typescript-loader package, then you can import without .vue extension. If you are using SCF component like you do, insure you have vue-loader package installed and shims-vue.d.ts file.

Hampton

Answer 4

If you use the WebStorm (JetBrains) IDE then you could automatically add ".vue" extension when add a new component:

https://youtrack.jetbrains.com/issue/WEB-48458?_ga=2.239486406.49000252.1666525745-1067897246.1664897407&_gac=1.84026987.1664897412.CjwKCAjws--ZBhAXEiwAv-RNL4Iv2BkQbCojuXeQctoNjErtdI_0HKHBXYuL0abKd6rnQEbjIQTScxoCfSkQAvD_BwE&_gl=1*mrrnth*_ga*MTA2Nzg5NzI0Ni4xNjY0ODk3NDA3*_ga_9J976DJZ68*MTY2NjUzMDE5OS42LjEuMTY2NjUzMDMzNS4wLjAuMA..

Demasculinize

Answer 5

This line import HelloWorld from '@/components/HelloWorld'; shoud be import HelloWorld from '@/components/HelloWorld.vue.

Because the compiler think the @/components/HelloWorld is a .ts or .js file, but it didn't exist.

Amethyst

i said the same thing in my question. that's why i'm asking "how to remove .vue extension" – Lasalle

I was looking into the same issue a while ago; the only answer I found in multiple places is: you cannot. Keep the '.vue' extension. Not a big deal anyway – Misfire

Answer 6

It's already an old question but it seems that you need to add the shim-vue.d.ts

//shims-vue.d.ts

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

Can find more here : What does the shims-tsx.d.ts file do in a Vue-Typescript project?

Damages

Answer 7

You could try adding this code into shims-vue.d.ts, if you have only .vue files inside your components folder

declare module '@/components/*' {
    import Vue from 'vue'
    export default Vue
}

Astyanax