Import Vue SFC files with Typescript

Last updated October 1, 2021 by Jacob Paris

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