Using Options from vue-class-component 8.0.0-rc.1

[CurrentlyNoName]

Hello,

quite some time ago, we started using vue-class-component with vue 3 and it was the version 8.0.0-rc.1 back then. Sadly it's not supported anymore and the vue-class-component is blocking the usage of never vue 3-versions. That's when I found this project and I wanted to ask if it's possible to use the "Options" from the "old" component (or if it's not, if it's possible to migrate.

The Source-Code looks like this

`
import {Options, Vue} from "vue-class-component";

@options({
components: {
SomeComponents
},
props: {
myString: {
type: String,
},
},
watch: {
show: function() {
// Do something
}
},
emits: ["emitSomething"],
})

export default class MyClassextends Vue {

}
`

It possible to migrate this to the vue-facing-decorator?

[rdhelms]

@CurrentlyNoName if you switch

import {Options, Vue} from "vue-class-component";

to

import {Component, Vue} from "vue-facing-decorator";

and update the @Options decorator to @Component, it should be very similar functionality (for the code in your example, anyway)

[rdhelms]

@CurrentlyNoName Out of curiosity, what version of Vue 3 broke vue-class-component for you?

[jaredmcateer]

For us it's not Vue 3 breaking vue-class-component, we're currently using them with Vue 3.3. It's the latest versions of npm and the way they changed how peer dependencies are handled. You have to use the --legacy-peer-deps flag to install vue-class-component, vue-property-decorator and vuex-class now. We ran into this as we're upgrading Node to latest LTS and I was exploring this package as an alternative solution.

However, even if vue-facing-decorators supported @Options you still need to wrap your class components with toNative so you're not really saving yourself from, in our case, a 250+ file diff.

[rdhelms]

@jaredmcateer You don't need to use toNative if you have experimentalDecorators: true.

We're using it in our codebase right now without toNative

[jaredmcateer]

Ah okay that is not clear in the quickstart docs as it seems to state you must use both. Either way without supporting @Options it's not going to be a (mostly) drop in replacement for the 8.0.0-rc.1 which is what we had been hoping for. Depending on how everyone feels we may do the huge diff or we may fork the obsolete packages and fix the peer deps until we've fully migrated to script setup.

[rdhelms]

@jaredmcateer If you're able to come back and share which option you go with, that would be really interesting to know.

I think it's unlikely that vue-facing-decorator will offer full support for the 8.0.0-rc version of vue-class-component since it's so different from earlier versions...but maybe there are some updates we could make to make the migration easier?

[ruojianll]

We can't fully support vue-class-component because vue 3 is not fully compatible with vue 2 in some breaking changes. So in my opinion, we could make some alias of objects and functions and write a migration guide.

[jaredmcateer]

@rdhelms we ultimately decided to stick with the RC packages of vue-class-component and vue-property-decorator and run npm with --legacy-peer-deps for now and to accelerate efforts to the composition API