Vue Numeric Input

Number input component based on Vue that is a replacement of native input number with optional control.


Install via NPM

$ npm install vue-numeric-input --save

Install via CDN

<script src=""></script>
<script src=""></script>


Register VueNumericInput globally:

import Vue from 'Vue';
import VueNumericInput from 'vue-numeric-input';



Include the VueNumericInput directly into your component using import:

import VueNumericInput from 'vue-numeric-input'

export default {
  components: {


Basic usage

    <vue-numeric-input  v-model="value" :min="1" :max="10" :step="2"></vue-numeric-input>

  export default {
    data() {
      return {
        value: 1,


Name Description Type Default Options
name Component name String - -
value Binding value Number - -
placeholder Input placeholder String - -
min Minimum allowed value Number -Infinity -
max Maximum allowed value Number Infinity -
step Incremental Step Number 1 -
align Alignment of Numeric Value String left left, center, right
size Component Size String Inherit size in px, em, rem etc e.g. '20px'
precision Number of decimals Number 0 Integer value
controls Enable/Disable Controls Boolean true true/false
controlsType Controls Type String plusminus plusminus/updown
autofocus Autofocus on Page Load Boolean false true/false
readonly Is Readonly Boolean false true/false
disabled Is Disabled Boolean false true/false


Event Name Description Parameters
input triggers when input (newValue)
change triggers when the value changes (newValue)
blur triggers when Input blurs (event: Event)
focus triggers when Input focus (event: Event)


Method Description Parameters
focus focus the Input component -
blur blur the Input component -