Vue Numeric Input Component: Install and Play

Vue Numeric Input

Number input component inspired by react-numeric-input and powered by Vue which serves as a replacement for the native input number with available options and methods for further customization.

Live Demo



You can install the component via NPM or CDN

npm install vue-numeric-input --save

For most cases is best to include the Vue Numeric Input component local, directly into your selected file by importing it:

import VueNumericInput from 'vue-numeric-input'

export default {
  components: {

Basic usage

Let's fix a numeric input for choosing a day of this month:

  <div class="date">

        <!-- min & max values -->
        <!-- control type -->


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


You can apply a custom look to the picker by using an id="style" attribute and then use that id to apply CSS inside the <style> section.


Name - Description

  • name - Component name
  • value - Binding value
  • placeholder - Input placeholder
  • min - Minimum allowed value
  • max - Maximum allowed value
  • step - Incremental Step
  • align - Alignment of Numeric Value
  • size - Component Size
  • precision - Number of decimals
  • controls - Enable/Disable Controls
  • controlsType - Controls Type
  • autofocus - Autofocus on Page Load
  • readonly - Is Readonly
  • disabled - Is Disabled


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

This project is open-source under an MIT licence.