Vue 3 Typescript Class Component - Type 'typeof import(.../node_modules/vue/dist/vue")' is not a constructor function type

Question

Hi I'm using Vue 3 with Typescript and Class Components. I just copy-pasted the example from the docs but it looks like there is an issue with Typescript:

TS1238: Unable to resolve signature of class decorator when called as an expression.
  This expression is not callable.
    Type 'typeof import(".../node_modules/vue-class-component/dist/vue-class-component")' has no call signatures.

TS2507: Type 'typeof import(".../node_modules/vue/dist/vue")' is not a constructor function type.

The docs: https://class-component.vuejs.org/guide/class-component.html

Does anybody know what is missing? Thanks!

Poulin

Answer 1

Based on this issue there's no need to that decorator and the imports are different for the version 3

<template>
  <div>{{ message }}</div> 
</template>

<script lang="ts">
import { Vue } from 'vue-class-component'

export default class HelloWorld extends Vue {
  message="Hello World"
}
</script>

Chiasma

Thanks! As you pointed out Component will be renamed to Options. github.com/vuejs/vue-class-component/issues/406 – Poulin

I have the exact same problem. The solution resolves the first error, on the Component decorator. But the error on Vue is still here... – Misdeem

can you please clarify more your second issue – Chiasma

Answer 2

This was driving me nuts. I'd been working with Vue and TypeScript in VS Code happily (well, ish) for a while, and thought I'd have another go at using class-style components. I get this:

Or lots of people suggest using this old format:

It was so frustrating! I'm sure if I was fluent in TypeScript I could debug the Vue files, but surely the whole point is that they provide a black box solution?

But after hours of searching, when I was about to give up, I found this posted by Patrice Ferlet on dev.to:

<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator'

@Component
export default class ClassComponentExample extends Vue {
  message = 'wow'
}
</script>

And it works! Turns out you now need to use vue-facing-decorator. Who knew?

Slovakia