vue3-numeric v1.0.0

vue3-numeric

This is an implementation for Vue 3 of the Original project vue-numeric in its version 2.4.3

Installation

# NPM
$ npm install vue3-numeric

Register globally

import { createApp } from 'vue';
import App from './App.vue';
import VueNumeric from 'vue3-numeric';

createApp(App)
  .component("vue-numeric", VueNumeric)
  .mount('#app');

Register as Component (Composition Api)

<script>
import { ref } from 'vue';
import VueNumeric from 'vue3-numeric';
export default {
  components: { VueNumeric },
  setup() {
    const price = ref('');
    return { price };
  },
};
</script>
<template>
  <vue-numeric
    separator=","
    v-model="price"
    :precision="2"
  ></vue-numeric>
</template>

Register as Component (Composition Api - setup sugar)

<script setup>
import VueNumeric from 'vue3-numeric';
const price = ref('');
</script>
<template>
  <vue-numeric
    separator=","
    v-model="price"
    :precision="2"
  ></vue-numeric>
</template>

Usage

Quick example

<script>
import { ref } from 'vue';
import VueNumeric from 'vue3-numeric';
export default {
  components: { VueNumeric },
  setup() {
    const price = ref('');
    return { price };
  },
};
</script>
<template>
  <vue-numeric
    currency="$" 
    separator=","
    v-model="price"
    :precision="2"
  ></vue-numeric>
</template>

Currency symbol

Set the currency prop to add a currency symbol within the input.

<vue-numeric currency="$"></vue-numeric>

Minimum & maximum constraint

Limit the minimum and maximum value by using min and max props.

• min defaults to 0.
• min and max accept String or Number values.

<vue-numeric v-bind:min="2000" v-bind:max="10000"></vue-numeric>

Disable/enable negative values

minus defaults to false (no negative numbers).

<vue-numeric v-bind:minus="false"></vue-numeric>

Enable decimal precision

By default the decimal value is disabled. To use decimals in the value, add the precision prop.

• precision accept a String or Number numeric value.

<vue-numeric v-bind:precision="2"></vue-numeric>

Thousands separator

• Default thousand separator's symbol is ,.
• Use the separator prop to change the thousands separator.
• separator only accepts space, , or ..
• When using the . or space as thousand separator, the decimal separator will be ,.

<vue-numeric separator="."></vue-numeric>

Input placeholder when empty

<vue-numeric placeholder="only number allowed"></vue-numeric>

Value when empty

By default, when you clean the input the value is set to 0. You can change this value to fit your needs.

<vue-numeric :empty-value="1"></vue-numeric>

Output Type

By default the value emitted for the input event is of type Number. However you may choose to get a String instead by setting the property output-type to String.

<vue-numeric output-type="String"></vue-numeric>

Props

License

Recommended IDE Setup

• VSCode + Volar