18

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!

The Error

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Tom
  • 1,358
  • 2
  • 14
  • 36

2 Answers2

23

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>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • 1
    Thanks! As you pointed out Component will be renamed to Options. https://github.com/vuejs/vue-class-component/issues/406 – Tom Sep 16 '20 at 20:57
  • 2
    I have the exact same problem. The solution resolves the first error, on the `Component` decorator. But the error on `Vue` is still here... – Eria Jun 01 '22 at 18:20
  • can you please clarify more your second issue – Boussadjra Brahim Jun 01 '22 at 18:54
1

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:

enter image description here

Or lots of people suggest using this old format:

enter image description here

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?

Andy Brown
  • 5,309
  • 4
  • 34
  • 39