No support for combination of Nuxt 2 and vue-class-component?

[sbarfurth]

I'm actually somewhat confused right now. I am using Volar in a Vue 2 / Nuxt 2 + TypeScript project. I've installed @vue/runtime-dom and built-in components work just fine. Components are written in class style with property decorators.

There seem to be a number of issues (closed) suggesting various things to get this working but I haven't found a way. I have created a minimal reproduction repository here: https://github.com/barfurth/volar-no-types-repro

Namely I have tried things suggested here with no success:

• Intellisense not working if used with vue-property-decorator (Vue 2) #753 (comment)
• how to define global component that base on vue-class-component #705

My question can be boiled down to: What is the definitive way to get prop and event type checking (aka. types in templates) working when using Vue 2, vue-property-decorator and vue-class-component. I feel like I have tried everything that has been suggested without any luck.

[johnsoncodehk]

Maybe this thread help you: #750 (comment)

[sbarfurth]

Very helpful @johnsoncodehk, I will try that.

Will this work with globally defined components at all (i.e. Vue.component or Nuxt)? I didn't get anywhere with global type definitions for @vue/runtime-dom before, so I was wondering if that is still the correct way to use global components. The documentation only talks about global components from third party packages (the example has vue-router).

To clarify: I don't mind creating definition files or anything. But when I had a file as docs suggested it was not doing anything whatsoever. Components were still showing as any.

[sbarfurth]

I have updated the example repository with a definition file that should work (my understanding) but does not.

https://github.com/barfurth/volar-no-types-repro/blob/main/components.d.ts

Usage happens here: https://github.com/barfurth/volar-no-types-repro/blob/main/pages/index.vue

With the above example repository, the type of the HelloWorld component is still showing as any. According to the comment #705 (comment) this was working at the end of last year. Is it possible something has changed that is preventing global component definitions from working with Vue 2?

[sbarfurth]

Thank you @johnsoncodehk, it appears prop type checking with global components is working properly now. Sadly your link to #750 (comment) does not work fully anymore. It seems the type of $emit may have changed, since I cannot assign anything to it. I believe this is a separate issue though. Using the exact example:

export default class Foo extends Vue {
  $emit!: {
    (e: 'my-event-1'): void
    (e: 'my-event-2', arg1: string, arg2: number): void
  }
}

This results in an error:

Type '{ (e: "my-event-1"): void; (e: "my-event-2", arg1: string, arg2: number): void; }' is not assignable to type '(event: string, ...args: any[]) => this'

Thank you for your quick support with the issue. :)