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.

"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./lib" // Your outDir
"files": ["./shims-vue.d.ts"],
"include": ["./src", "./src/**/*.vue"]

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

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.