Best way to integrate BigNumber.js into Vue project?

Question

Vue.js

How can BigNumber.js be integrated into the project for use in forms?

Option 1 : You can use computed getters and setters, where in setters wrap in value in BigNumber -

// emplate
<input v-model="fieldValue" />
// computed
fieldValue: {
   get() { return this.form.count.toString() },
   set(v) { this.form.count = new BigNumber(v) }
}

The disadvantage of the first option is that for each field you need to make a computed property with getters and setters.

Option 2 A wrapper component that would encapsulate the conversion of a regular numeric type to bigNubmer and vice versa. Minus: The need to duplicate all the internal logic of the component, but for bigNumber numbers. + Specifically, in my case I'm using a third party component

Option 3 Use @change event and :value attribute on input component instead of v-model. Those. in the change handler, wrap the entered number in BigNumber and get its value in value. minus: we do not use v-model, which, as for me, is much more concise

. What other solutions can you suggest? Thanks in advance!

lib link https://github.com/MikeMcl/bignumber.js

Answer 1

1+2. A wrapper component that uses a method with a getter-setter. No logic needs to be rewritten.)