Jacob Paris
← Back to all content

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

Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.