When import .vue inside .js file it gives module not found in vscode

[sagarrabadiya]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win
• Vetur version: 0.21.0
• VS Code version: 1.35.0

Problem

When .vue file is imported from .js file and checkJs is true in jsconfig.json file vscode gives error that it can't find module even though .vue extension is included in the import please check the screenshot.

Reproducible Case

Just create new app using vue-cli and in main.js try to ctrl + click on App.vue import it doesn't take me to the App.vue file.

[yoyo930021]

You need to add one file.
see https://github.com/microsoft/TypeScript-Vue-Starter/blob/master/README.md#single-file-components.

[sagarrabadiya]

Hi @yoyo930021 I have tried by adding vue-shims.d.ts but when I add vue-shims.d.ts file the module not found error is gone but the problem is when I try to find the module definition or try ctrl + click on the imported component it doesn't take me to the .vue file instead it shows the ts declared module as definition please check the screenshot

[yoyo930021]

jsconfig.json content?

[sagarrabadiya]

@yoyo930021 here is the jsconfig.json content

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "module": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "checkJs": true
  },
  "exclude": ["node_modules"]
}

[yoyo930021]

I think it's a problem.
The .ts file have the same problem.

[sagarrabadiya]

Yes exactly, if i ctrl + click from .vue file then it works, meaning if i import .vue file inside .vue file's script tag then it navigates correctly but if .vue file is imported in .js or .ts file then it can't detect that module as .vue component

[yoyo930021]

When use .ts or .js files, VSCode use typescript-language-server in VSCode built-in.
It don't know .vue file, It use vue-shims.d.ts file to know.

When use .vue files, VSCode use vue-language-server in vetur.
It can know .vue file by itself, so can get more info.

The above is my guess.

[octref]

Depends on #673, for now you can take a look at https://github.com/HerringtonDarkholme/vue-ts-plugin.

[huoyuxin]

it just can not recognize and go to the definition the .vue import in .js / .ts
so, there is a little trick:
you can change .js / .ts to .vue, and use <script lang="ts"></script> to wrap the .vue import code, then everything goes perfect

[Joe-Joi]

for me, adding '.vue' extention is the only solution: import App from "./App.vue";