We are using Vue 2 with a lot of components built on top of class based components using vue-class-component and vue-property-decorator.

Now we need to upgrade to Vue 3 for better performance and long time support.

To answer your questions:

1. I did a lot of research and there is no plan to support class based components going forward from here. The two plugins from above are stuck at RC level for Vue 3. See: https://github.com/vuejs/vue-class-component/issues/406

2. A library which is not maintained and/or properly tested with a new Version of Vue is never a good idea to use imo.

3. Thats a question where there is no clear answer for.

You can try this strategy, maybe it works for you too:

We added the composition API and script setup via these plugins to our existing Vue 2 code base:

• https://github.com/vuejs/composition-api
• https://github.com/antfu/unplugin-vue2-script-setup

Update 22/07/10: Vue 2.7 (the last minor release) was released, there is no need for the plugins above when using this version: https://blog.vuejs.org/posts/vue-2-7-naruto.html

This allows us to use composition API + script setup and class based components simultaneously. So we are beginning to write new components with the new syntax and rewriting old code step by step. When we are done with this process, we are going to migrate to Vue 3 using the migration guide:

• https://v3-migration.vuejs.org/

That is a lot of work and very annoying to do, as it takes a lot of time away from new features or bugfixes which are more important than dealing with this upgrade pain. But we hope going forward from here that Vue is going to me more stable in their decisions and how they want to continue forward.

I also agree with you saying that class based components are a more elegant way to do things than the composition API. It is also shorter and closer to backend programming languages. Its very sad to see this one go.

All the best Jakob

Update 23/04/14: Great new article on how one could continue using class based components: https://medium.com/@robert.helms1/vue-2-to-vue-3-with-class-components-cdd6530a2b2a

Further ressources:

Guide: https://levelup.gitconnected.com/from-vue-class-component-to-composition-api-ef3c3dd5fdda

More reasons why they drop it:

https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#type-issues-with-class-api

https://vuejs.org/guide/extras/composition-api-faq.html#better-type-inference

TL:DR

I'm new in Vue (coming from React) but from what I understand the answer above is not wrong but it doesn't answer the question of how to use @Model decorator. Provide and Inject is an overkill for passing props from parent to child. The documentation is not clear, so I scratched my head a lot on this one. But remember that the package is referring to props. Hence @Prop, @PropSync and @Model should be at the child component. Here is what I did and it didn't throw out that horrible console error. Parent component:

<template>
  <div>
     <input type="text" v-model="modelText" />
    <Child 
      :modelText="modelText"
    />
  </div>
</template>

<script lang="ts">
import Component from 'vue-class-component';
import Vue from 'vue';
import Child from './Child.vue';

@Component({
  components: {
    Child,
  }
})
export default class Parent extends Vue {
  private modelText: string = 'model-text';
}
</script>

And for the child component:

<template>
    <div>
      @Model: {{modelText}}
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, PropSync, Model } from 'vue-property-decorator';

@Component({

})
export default class Child extends Vue {
  @Model('input', { type: String }) modelText!: string;
}
</script>