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)
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:
- Is Vue3 Options API + vue-property-decorator a viable way to go?
- 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?
- 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.
