Number Input Component For Vue.js 3

A pretty simple and cross-browser number input spinner component for Vue.js 3 applications.

Basic Usage:

1. Import and register the number input component.

import { createApp } from 'vue';
import VueNumberInput from '@chenfengyuan/vue-number-input';
const app = createApp({});
app.component(VueNumberInput.name, VueNumberInput);

2. Add the vue-number-input component to the app.

<vue-number-input controls></vue-number-input>

3. Available component props.

attrs: {
  type: Object,
  default: undefined,
},
center: Boolean,
controls: Boolean,
disabled: Boolean,
inputtable: {
  type: Boolean,
  default: true,
},
inline: Boolean,
max: {
  type: Number,
  default: Infinity,
},
min: {
  type: Number,
  default: -Infinity,
},
name: {
  type: String,
  default: undefined,
},
placeholder: {
  type: String,
  default: undefined,
},
readonly: Boolean,
rounded: Boolean,
size: {
  type: String,
  default: undefined,
},
step: {
  type: Number,
  default: 1,
},
modelValue: {
  type: Number,
  default: NaN,
},

4. Events.

<vue-number-input @update:model-value="onUpdate" @change="onChange" @input="onInput" controls></vue-number-input>

export default {
  methods: {
    onUpdate(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
    onChange(event) {
      console.log(event);
    },
    onInput(event) {
      console.log(event);
    },
  },
};

Preview:

Changelog:

v2.0.0 (02/07/2022)

• Bug Fixes

v2.0.0beta1 (04/10/2021)

• fix: should emit a single value

v2.0.0beta (01/16/2021)

• refactor: upgrade to Vue 3

Download Details:

Author: fengyuanchen

Live Demo: https://fengyuanchen.github.io/vue-number-input/

Download Link: https://github.com/fengyuanchen/vue-number-input/archive/master.zip

Official Website: https://github.com/fengyuanchen/vue-number-input

Install & Download: