How can I import a Vue class component with proper types?

Question

If I have a single-file Vue class component, for instance:

// MyComponent.vue
<template>
  <div></div>
</template>

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

And I import it somewhere else, and get an instance of it.

import MyComponent from "./MyComponent.vue";
...
const foo = ... as MyComponent;
foo.message = "goodbye";

With a standard Vue CLI 3 setup this gives an error, because it contains shims-vue.d.ts with the following content:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

As I understand it, this means that whenever you write import Foo from "./Foo.vue", then Foo will just be an alias for Vue, and you won't be able to access its members.

This does appear to be the case if you import from .ts files. If you import from .vue files, it magically works!

Unfortunately all of my tests are .spec.ts files so I can't import the types of any components. This makes testing difficult. Is there any way to fix this?

Answer 1

The way I do it in my Vue 2 and Vue 3 projects is as follows:

1. Create a Foo.vue file and add script tag to the Foo.vue.ts file. Here is snippet.

   <template>
      <div>... Your template code here ...</div>
   </template>
   
   <script lang="ts" src="./Foo.vue.ts" />
   

2. Write component code in Foo.vue.ts file.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

3. Now you can use as keyword.

import MyComponent from "./MyComponent.vue";
...
const foo = obj as MyComponent;
foo.message = "goodbye";