Search code examples
vuejs2vuejs3vue-composition-apivue-options-api

Migrating from vue2 with property-decorator and class style syntax to vue3

I maintain quite a large vue2 project, which among other libraries makes use of Vuetify, vue-class-component, vue-property-decorator and typescript. Example component:

(The component is simplified and not compilable for the sake of displaying the syntax) (The component is simplified and not compilable for the sake of displaying the syntax)

We are very satisfied with this setup, because of the simple syntax, it´s so easy for new and existing developers to understand, and because we haven´t had any real problems with this setup in it´s current lifespan of 2-3 years. The official support for vue2 is coming to and end, and we would like to upgrade to vue3. Our problem is now which path we should follow, and what is possible. I´ve been researching for quite some time now, but are still confused on the topic. The Composition API in vue3 has been made for reason, and people seem to be generally happy with it, which I have a hard time understanding. Besides a couple of cool new features, The Composition API seems like a downgrade to me in terms of not-easy-to-understand, "redundant", and a too explicit syntax. A couple of examples:

Props:

Vue2
@Prop({ default: '' }
label!: MyProp;

Vue3
props: {
  myProp: {
    type: Object as PropType<MyProp>, //Kind of weird explicit type definition 
    default: ''
  },
}

Variables (same thing goes for functions)

Vue2
myValue: string = ""; //Reactive and available in the template

Vue3
setup(props, context) { //Must be setup in the setup function to make it available in the template
  const myValue: Ref<string> = ref(""); //Must declare it reactive with this funky explicit syntax
  return {
    myDataValue, //Must be returned from setup function
  };
}

Computed properties

Vue2 
get myValue(): string {
    return this.myDataValue.toLowerCase();
}

Vue3
setup(props, context) {
  const myValue: ComputedRef<string> = computed(() => {
    return myDataValue.value.toLowerCase(); //Accessing a value requires .value
  });
}

Even if we decided to go with the Composition API, it would be very expensive, time-wise, to rewrite our code-base.

I´ve tried creating a sample vue3 class-style component project from scratch using the Options API (following this guide), and afterwards copy some of my existing components into the project. This seems to work after som fiddling around not using too much time. So when Vuetify 3 finally release and we can migrate, my questions are:

  1. Is Vue3 Options API + vue-property-decorator a viable way to go?
  2. The vue-property-decorator library has not been updated for two years! And there is no official vue3 support documentation. So is this vue-property-decorator with vue3 just a very bad idea?
  3. Is it really worth the time and effort migrating to the Composition API?

Thanks!

Update 08/01/2023:

We tried a few tests Vue3 Composition API before the migration. The syntax and the "troublesome" way of doing things made us go with vue-facing-decorator instead. This is basically the same as the vue-property-decorator, and we are so far very happy with our choice 👍 Thanks alot for the contributions.

Solution

  • 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:

    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:

    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