Typescript: IDE reports TS2307: Cannot find module error for Vue components imports

[NotCoderJack]

Describe the bug

IDE Visual Studio Code reports TS2307: Cannot find module error for Vue components imports. Imports are higlighted in red.

Reproduction

https://github.com/NotCoderJack/vite-template-ts

• create with create-vite-app with command yarn create vite-app project-name --template vue-ts
• Open any file that imports *.vue files

System Info

• required vite version: 1.0.0-rc.8
• required Operating System: macOS v10.15.5
• required Node version: v12.16.1
• Optional:
  • npm/yarn version: 1.22.4
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.2
  • Installed @vue/compiler-sfc version: 3.0.2

Logs (Optional if provided reproduction)

no logs

[cxdev]

try add a ‘shims-vue.d.ts’ in src,
declare module '*.vue' { import {ComponentOptions} from 'vue' const component: ComponentOptions export default component }

This will avoid the error, but i don‘t know how can i goto the real filepath by 'ctrl + click' in vscode .

all '*.vue' will goto shims-vue.d.ts. emmm... Is there anything else i need to set?

[NotCoderJack]

Thanks! It works! But Where did you find this solution? In Vue 2.0 + TypeScript, I know a similar workaround:

import Vue from 'vue'
export default Vue

const component: ComponentOptions is amazing.

[yyx990803]

Make sure to use workspace version of TS in VSCode so that it loads local TS plugins.

[lovetingyuan]

shims-vue.d.ts should be included in vue-ts preset template.

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}