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:
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
A library which is not maintained and/or properly tested with a new Version of Vue is never a good idea to use imo.
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
Answer from JBS on Stack OverflowWe 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:
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
A library which is not maintained and/or properly tested with a new Version of Vue is never a good idea to use imo.
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
FWIW, despite the fact that I am really more a fan of using class based components, we made the decision to convert all our ±300 components to Options API. So at least we can upgrade to Vue@3 and Vite.
Changing the complete codebase to Composition API (with <script setup>) is not worth it and potentially error prone. All new components will be written with <script setup> though.
Steps that we followed to get there:
- Make sure you are at [email protected]. This version includes backported features from vue@3, including Composition API and
<script setup>. See their blog. - Check and update all dependencies to be compatible with [email protected] (e.g. we make extensive use of AgGrid that needed to be at version 27).
- Gradually convert all class components to Options API via this package: https://www.npmjs.com/package/vue-declassify. (Only the
@Emitdecorator needs to be handled manually).cdinto a directory that you want to convert and run this command:find . -name "*.vue" -exec vue-declassify {} \;to execute the converted on multiple vue files sequentially.
This process took us approximately 2 days to execute completely.
NB: Make sure that your codebase is thoroughly backed by unit and e2e tests prior starting this process .
» npm install vue-property-decorator
» npm install vue-decorator
I have the same problem with one of my projects. We wanted to use TypeScript with Vue2 and the property decorator was the best way to go, but migrating means, you can't do it gradually component by component, you have to refactor all of them as this approach is no longer supported. I'd recommend to refactor the components to use the composition API, with a bit of work you can even migrate potential mixins you have to composition functions.
In short it means a lot of work, without the property decorator you probably could migrate way quicker.
EDIT:
I just found out that people are working on a Vue 3 version of the property decorator, but rely on the class component. You can read up on this interesting thread:
https://github.com/vuejs/vue-class-component/issues/406
Unfortunately, Vue3 doesn't support decorators the way Vue2 did. I ended up having to rewrite my project from scratch. Big minus for Vue! A lot of things that were natural and smooth in Vue2 have been removed.