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 outDir
5  },
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