Format number inertia + vue3

One way to format a number while the user is typing is to use a computed property in Vue that formats the input value using the toLocaleString() method. Here's an example:

<template>
  <div>
    <label>Enter a number:</label>
    <input type="number" v-model="numberFormatted">
  </div>
</template>

<script>
import { computed } from 'vue';
import { useThrottle } from '@vueuse/core';

export default {
  setup() {
    const number = ref(0);
    const numberFormatted = computed({
      get() {
        return number.value.toLocaleString();
      },
      set(value) {
        number.value = value;
      },
    });

    // Use throttle to limit the number of times the computed property is updated
    const throttledNumberFormatted = useThrottle(numberFormatted, 500);

    return {
      numberFormatted: throttledNumberFormatted,
    };
  },
};
</script>

In this example, we use the computed function to create a reactive computed property called numberFormatted. The get function returns the formatted value of number using the toLocaleString() method. The set function updates the value of number when the user types in the input field.

We also use the useThrottle function from the @vueuse/core library to limit the number of times the computed property is updated. This helps to improve performance and reduce unnecessary re-renders.

Note that this example uses the ref function to create a reactive variable called number. If you're using the Composition API in Vue 3, you can replace ref with reactive and computed with computed from the vue package.