Import Vue SFC files with Typescript
If you're adding Typescript to a Vue project, you need to do a bit of extra work to make Single File Components load properly into the type system.
Typescript will throw an error if you try to import a .vue
file if it doesn't understand how to parse it as a Vue SFC.
Error: Cannot resolve module './MyComponent.vue'
To resolve this, create a shims-vue.d.ts
file in your project root.
declare module "*.vue" { import Vue from "vue" export default Vue}
Add the shim file to your tsconfig.json
file.
1{2 "extends": "../../tsconfig.json",3 "compilerOptions": {4 "outDir": "./lib" // Your outDir5 },6 "files": ["./shims-vue.d.ts"],7 "include": ["./src", "./src/**/*.vue"]8}9
Then restart the TS engine, either by recompiling if you're doing so from the command line, or in VS Code by opening the command palette and searching for Typescript: Restart TS Server