I'm migrating a midlevel app from Vue 2 to Vue 3.
For this task, I'm rewrittig all code to make use of Composition Api. I like Composition Api, however, I don't see a good advantage when simplifying code. With Composition Api, somethings looks more complex or verbose than before. I hope be wrong.
This becomes specially noticiable when refactoring mixings. When using mixins, you just have to use them and that's enought to get all desired functionality, while when using composables, you have to be aware of what is inside the composable to extract/use specific functionality from composable...
My main problem arises when I want to reuse defineProps(), defineEmits() and defineExpose().
In some parte of my app, I got all posible inputs defined in different components, for example:
- InputText: Just text
- InputNumber: Reusing InputText, limiting to only numbers
- InputMoney: Reusing InputNumber, adding some money formatting
- InputNumberRange: Reusing two InputNumbers
- etc
As you can imagine, all that inputs are almost the same. The needed code for those components are very small, just a InputMixin and a couple of overwrites if needed.
However, when using Composition Api, I don't know how to get it so simple because I don't know how to 'share' the code between these components. How could I reuse defineProps(), defineEmits() and defineExpose() between them?
Is it possible to use some kind of inheritance? (like extends: MyComponent)