Vue 3 as a class component

Question

currently in the project we uses Vue 2.x and our components works in such way

@Component({
template: `
    <div>
      some code ....
    <div> `
})
export default class class1 extends Vue {
    @Prop() data: IsomeData;
}

vue-class-component and vue-property-decorator allows us to right in this way, according the docs, @Component was replaced to @Options({}).

How can I migrate to Vue3 without headbreaking refactoring?

Answer 1

I'm trying to migrate vue2 to vue3 in 2023. https://class-component.vuejs.org/ mentions the below.

Additionally, if you're interested in migrating out of class components, you might find the CLI tool vue-class-migrator helpful for the transition.

The　vue-class-migrator looks like to be good solution.

Answer 2

Try this.

<template>
    <div>
      some code ....
    <div> 
</template>

<script>
  import { Vue } from "vue-class-component";
  import { Prop } from "vue-property-decorator";
  export default class Home extends Vue {
       @Prop() data: IsomeData;
  }
</script>

Answer 3

For anyone reading this in 2023, in Vue3, it's no longer recommended to use class-component design and the https://class-component.vuejs.org/ package creator isn't maintaining it past Vue2

This library is no longer actively maintained. It is no longer recommend to use Class-based components in Vue 3. The recommended way to use Vue 3 in large applications is Single-File Components, Composition API, and . If you still want to use classes, check out the community-maintained project vue-facing-decorator .