Input field component to display a formatted currency value based on Vue.js

Overview

vue-numeric

npm npm npm Build Status Codecov npm

Input field component to display a formatted currency value based on Vue.

Live Demo

Works with Vue 2.*

Installation

Install via CDN

<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>

<script>
  Vue.use(VueNumeric.default)
</script>

Install via NPM

$ npm install vue-numeric --save

Register as Component

import Vue from 'vue'
import VueNumeric from 'vue-numeric'

export default {
  name: 'App',

  components: {
    VueNumeric
  }
}

Register as Plugin

import Vue from 'vue'
import VueNumeric from 'vue-numeric'

Vue.use(VueNumeric)

Usage

screen shot 2016-12-08 at 2 19 31 pm

Quick example

<template>
  <vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
</template>

<script>
import VueNumeric from 'vue-numeric'

export default {
  name: 'App',

  components: {
    VueNumeric
  },

  data: () => ({
    price: ''
  }),
}
</script>

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

Props Description Required Type Default
currency Currency prefix false String -
currency-symbol-position Position of the symbol (accepted values: prefix or suffix) false String prefix
max Maximum value allowed false Number 9007199254740991
min Minimum value allowed false Number -9007199254740991
minus Enable/disable negative values false Boolean false
placeholder Input placeholder false String -
empty-value Value when input is empty false Number 0
output-type Output Type for input event false String String
precision Number of decimals false Number -
separator Thousand separator symbol (accepts space, . or ,) false String ,
decimal-separator Custom decimal separator false String -
thousand-separator Custom thousand separator false String -
read-only Hide input field and show the value as text false Boolean false
read-only-class Class for read-only element false String ''

License

Vue-Numeric is open-sourced software licensed under the MIT license

Support

Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks 😃

Comments
  • Is `null` as a value possible?

    Is `null` as a value possible?

    Hey,

    is it possible to add null as a value?

    For a more detailed explanation, this is my scenario:

    I have a form which is populated by API data and the user should add/change data and then submit it. There we have a <vue-numeric> input as well. When the user edits the field, everything works as expected.

    But I have the situation that sometimes the input isn't populated at all and the user doesn't change anything either. In this case the empty value 0 is sent back to the API but it should be null ...

    I just saw that there is something like :empty-value now ... But it still expects the the value is a Number, doesn't it?

    enhancement 
    opened by rathesDot 13
  • Initial Value Empty if initial value is ZERO

    Initial Value Empty if initial value is ZERO

    Expected Behavior

    My initial value is Zero. So I expect to see the value Zero formatted the way I configured it. I expect to see the field like this when I first open the page: image

    Actual Behavior

    When I first load the page all the values that are initially zero are rendered as empty fields: image

    If I click on the field then I get a value zero shown and if I click out of the field (blur) then the zero stays there formatted too. However, if I navigate to another page and get back the value is again gone.

    This only happens on values that are ZERO. All other values get correctly displayed initially too. I thought it might have something to do with the default value but that wasn't the case.

    I took a look and thought this might be related to #5 but it seems to be something a bit different.

    Specifications

    • Plugin Version: 4.2.1
    • Vue.js Version: 2.6.11
    • Browser: Chrome
    • OS: Linux

    Code

    Here is the component configuration:

    <vue-numeric
              v-model="ebitdaRate"
              decimal-separator=","
              separator="."
              currency="%"
              currency-symbol-position="suffix"
              :precision="2"
              :minus="true"
              class="growth-rate-input"
            />
    

    I am using the vue-class-component so I won't add the component Java code here, but I can guarantee that this is a reactive field which works correctly updating (set and get).

    opened by Flavsditz 12
  • Value not updating when changing amount from another input

    Value not updating when changing amount from another input

    Hi!

    If I have two inputs using the same property, the one with vue-numeric is not updated. For example

    <input type="text" v-model="invoice.total">
    <vue-numeric v-model="invoice.total"></vue-numeric>
    
    Total is: {{invoice.total}}
    

    The value entered in the regular input tag is only updated in the html but not on the vue-numeric. Checking with dev tools, I see that amount is 0 and value is changing inside the VueNumeric component

    Any Ideas?

    opened by emilioeduardob 7
  • Trying to use vue-numeric input for all currency related fields of my form

    Trying to use vue-numeric input for all currency related fields of my form

    If you are reporting bugs please fill the form below otherwise feel free to delete the form.

    Expected Behavior

    when I use <vue-numeric> multiple times in a form each should reactively show its own result <vue-numeric separator="," v-bind:max="99999999999999" class="gui-input" v-bind:empty-value="0" v-bind:min="0" v-bind:precision="4" v-model="budget.audit_cost"></vue-numeric> <vue-numeric separator="," v-bind:max="99999999999999" class="gui-input" v-bind:empty-value="0" v-bind:min="0" v-bind:precision="4" v-model="budget.others"></vue-numeric>

    Actual Behavior

    but when enter number in first field, result not show but when enter number in second ,first component result also appears .

    Steps to Reproduce the Problem

    1.import VueNumeric from 'vue-numeric' 2.Vue.component('vue-numeric',VueNumeric) 3.

    Specifications

    • Plugin Version:2.3.0
    • Vue.js Version:^2.5.17
    • Browser:
    • OS:
    opened by kalibano 6
  • Vue-numeric DOM doesn't update?

    Vue-numeric DOM doesn't update?

    Excuse me, thank you for the plugin.

    I made a dynamic number entry and saved it into the database. However when I loaded the value from database and pushed the array to render in the dom (using v-for), the vue-numeric doesn't update (needs to be clicked first to update)

    Expected Behavior

    When model is programatically updated, updates dom and formats it

    Actual Behavior

    Shows placeholder instead screen shot 2017-10-19 at 10 57 26 After click: screen shot 2017-10-19 at 10 57 32

    Specifications

    • Plugin Version: 2.2.3
    • Vue.js Version: 2.5.2
    • Browser: Google Chrome
    • OS: MacOS Sierra 10.12.6

    Sorry for my bad English, and thanks before.

    opened by Diathedia 6
  • Placeholder shown instead of value

    Placeholder shown instead of value

    Expected Behavior

    Given you have the following vue-numeric component:

    <vue-numeric v-model="value" placeholder="placeholder" />
    

    If value is set, I would expect to see the value. Just as described in the documents:

    Input placeholder when empty

    Actual Behavior

    When component is mounted, the value is not shown until you click on the input field. The placeholder is shown instead.

    Steps to Reproduce the Problem

    See example in codesandbox: https://codesandbox.io/s/v821j799wl

    Specifications

    • Plugin Version: 2.3.0
    • Vue.js Version: 2.5.2
    • Browser: Firefox Dev. 60.0b12
    • OS: macOS 10.13.3

    In #39 you said it was intended to work like this, can you explain the reason for this?

    Thanks!

    opened by jeroenschieven 5
  • Update method doesn't trigger in IE11

    Update method doesn't trigger in IE11

    Hey,

    I'll come back and properly fill out this issue this afternoon, but thought I would just put it here before I forget.

    The this.update method doesn't seem to ever get fired in IE11 or below. However the this.process one does.

    I have temporarily updated the this.process method to the following (i expanded the if statements while I was debugging) and remove the update method

    /**
    * Validate value before update the component.
    * @param {Number} value
    */
    process: function(value) {
    	if (value >= this.max) {
    		value = this.max;
    	}
    	if (value <= this.min) {
    		value = this.min;
    	}
    	if (!this.minus && value < 0) {
    		value = this.min >= 0 ? this.min: 0;
    	}
    
    	this.$emit('input', Number(accounting.toFixed(value, this.precision)));
    },
    
    opened by mikestreety 5
  • empty props implementation for not formatting empty values

    empty props implementation for not formatting empty values

    Hi @kevinongko!

    I did the implementation below, what do you think?

    When the value is empty or null, don't format the field so that the placeholder can be displayed, using empty props.

    <vue-numeric :empty="true" v-model="price"></vue-numeric>

    opened by luisvquintas 5
  • Add check for a ZERO value

    Add check for a ZERO value

    The JS language considers the value ZERO to be "false". This has to do with the fact that the numeric representation of true/false are 1/0.

    This was of course preventing the initial value of a numeric field to be set to zero since there was a check on the mounted function that saw if the value was defined.

    I've added a simple OR case, where if the value was evaluated to FALSE than we check again for if the value is zero. This fixed the case where the value ZERO was not being shown when it was deliberately chosen.

    It did break another case when we pass an empty string. To fix it I also test if the original value is not empty (which would be evaluated to zero)

    Make sure to read the contribution guidelines before submitting PR.

    opened by Flavsditz 4
  • Input looses focus

    Input looses focus

    I just downloaded your component but am getting an issue where the input looses focus on each keypress. So if the user wants to write 100,000 => he/she must type 1, set focus, 0, set focus, 0, set focus, etc. It can be very tiresome. Is there a work around for this?!?

    Following is my code: <vue-numeric separator="," v-model.native="data.item.value"></vue-numeric>

    opened by ablishek 4
  • Currency symbol position

    Currency symbol position

    Hi, I've made a changes for currency symbol position (some currencies are on the left side, some on the right side). May I do a "Pull request" for your approval? Karel

    opened by knagyorg 4
  • Bump engine.io from 6.2.0 to 6.2.1

    Bump engine.io from 6.2.0 to 6.2.1

    Bumps engine.io from 6.2.0 to 6.2.1.

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)
    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)
    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimatch from 3.0.4 to 3.1.2

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump socket.io-parser from 4.0.4 to 4.0.5

    Bump socket.io-parser from 4.0.4 to 4.0.5

    Bumps socket.io-parser from 4.0.4 to 4.0.5.

    Release notes

    Sourced from socket.io-parser's releases.

    4.0.5

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    Links

    Changelog

    Sourced from socket.io-parser's changelog.

    4.0.5 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    4.2.0 (2022-04-17)

    Features

    • allow the usage of custom replacer and reviver (#112) (b08bc1a)

    4.1.2 (2022-02-17)

    Bug Fixes

    • allow objects with a null prototype in binary packets (#114) (7f6b262)

    4.1.1 (2021-10-14)

    4.1.0 (2021-10-11)

    Features

    • provide an ESM build with and without debug (388c616)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Issue when typing digits with comma it's reseted to 0.00

    Issue when typing digits with comma it's reseted to 0.00

    Can you add the ability to somehow restrict numeric input to only '.' or ',"? Because when I set the delimiter as '.' and try to enter 2,55 it resets to 0.00 (I think it's a bug) or we should be able to use both cases or limit this delimiter with some prop

    Expected Behavior

    2,55 or restrict to use ',' demiliter

    Actual Behavior

    2,55 resets to 0.00

    Steps to Reproduce the Problem

    1.Write 2,55 (with comma) 2. Remove focuse from input

    Specifications

    • Plugin Version: 2.5.0
    • Vue.js Version: 2.6.12
    • Browser: Chrome
    • OS: Windows
    opened by Taifunov 0
Releases(v2.5.0)
Owner
Kevin Ongko
Web developer, freelancer and open source enthusiast.
Kevin Ongko
Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (<currenc

Matthias Stiller 461 Nov 28, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 44 Nov 19, 2022
Vue-money-format: A lightweight display component for localized currency display

This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.

null 15 Sep 22, 2022
Tiny (2k gzipped) input/directive mask for currency

v-money Mask for Vue.js Features Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable F

Vue.js Tips 742 Nov 18, 2022
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
A pattern-placeholder for Vue that changes based on input text.

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

Victor 6 Apr 19, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 41 Nov 4, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Nov 17, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Nov 13, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 13 Nov 24, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 12 Oct 12, 2022
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Anjorin Damilare 7 Nov 6, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

null 18 Jun 15, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 18 Nov 14, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022