Vue Cleave component is based on cleave.js for Vue

Last update: Mar 31, 2022

Cleave

Cleave component is based on cleave.js for Vue Bulma.

Installation

$ npm install vue-cleave --save

Examples

">
<template>
  <cleave placeholder="Enter your credit card number" :options="{ creditCard: true }">cleave>
template>

<script>
import Cleave from 'vue-cleave'

export default {
  components: {
    Cleave
  }
}
script>

Badges


fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

GitHub

https://github.com/vue-bulma/cleave
Comments
  • 1. Making this component compatible with Vue 2.0 and parent v-model

    I was having trouble syncing the input value from this child component with the v-model of the parent. This was the solution to make it work for me with Vue 2.0.

    <input :type="type" :value="value" @input="$emit('input', $event.target.value)" />

    Reviewed by Ataraxy at 2016-09-21 19:05
  • 2. Problem with v-model

    I thought this issue had been closed, but cleave no longer works when using v-model. I'm using [email protected]^2.3.3 and [email protected]^1.2.0.

    Here is the typical cleave component. When adding the v-model field, the cleave formatting no longer works and without the v-model field, it does.

    <cleave v-model="date" placeholder="Delivery Date" :options="{ date: true, datePattern: [ 'm', 'd', 'Y'] }"></cleave>

    Reviewed by alexandrasmith00 at 2017-05-28 14:56
  • 3. Having problem using v-model with this componement

    After upgrade to version 1.2.0. The auto format from cleave.js stopped working if I add an v-model attribute.

    Here's the code I use.

                <cleave
                       class="input"
                       v-model="code.forwardPhoneNumber"
                       placeholder="Enter phone number"
                       :options="{ blocks: [0, 3, 3, 4],
                       numericOnly: true,
                       delimiters: ['(', ') ', '-'] }">
                </cleave>
    

    Tested on both firefox & chrome & safari in macOs. I think this should be a major issue.

    Reviewed by gongdao123 at 2017-04-15 01:46
  • 4. Rebuild cleave on options change

    Could we add a deep watch to the options object to rebuild if the options change?

    For example, if I am using this for a phone number input that is dependent on their country setting, the option object may change.

    Reviewed by BrockReece at 2017-03-31 11:23
  • 5. Add support for Vue 2.0 v-model

    Now you can do something like the following and it will work as expected:

    <cleave placeholder="Enter your credit card number" :options="{ creditCard: true }" v-model="card"></cleave>
    
    Reviewed by goldfire at 2016-12-07 20:01
  • 6. Handle external changes to value

    Sometimes the value of a field is initialised or calculated externally and thus filled in automatically, not by an input event. External changes of the value are now also passed to cleave to make sure they are masked properly.

    #19

    Reviewed by NeleR at 2018-12-10 09:27
  • 7. Way of passing through events

    Hey, me again

    This PR will allow you to pass event listeners through a prop object in the following format

    { 
      blur() {
        console.log('on blur')
      }
    }
    

    I think this is a lot cleaner than passing events through as separate props

    Reviewed by BrockReece at 2017-04-03 12:59
  • 8. Handle external changes to value

    Sometimes the value of a field is initialised or calculated externally and thus filled in automatically, not by an input event. External changes of the value are now also passed to cleave to make sure they are masked properly.

    #19

    Reviewed by NeleR at 2018-12-14 12:04
  • 9. Dynamic masking based on input length

    I need to have a text input so that the user can type the company brazillian CNPJ number (14 digits) or a brazillian CPF (11 digits) with a dynamic mask according to the length of the text, as the example below:

    CNPJ: 12.345.789/1011-12 CPF: 123.456.789-01

    Is there are way to do this using vue-bulma/cleave ? If not, that'd be a really great feature to be implemented in the next release. Thanks a lot.

    Reviewed by felipesilvati at 2018-12-13 15:48
  • 10. Handle value being changed externally (not through input)

    In our setup, we have some fields that are 'calculated' and thus are filled in automatically, not by an input event. We need masks on those fields as well. However, it seems like external changes of the value are not passed to cleave at the moment and thus are not masked properly.

    Reviewed by NeleR at 2018-12-10 09:20
  • 11. Need a fresh cleave.js 1.0.1

    1.0.1 exposed last days brings a lot of bug fix (https://github.com/nosir/cleave.js/pull/161 & https://github.com/nosir/cleave.js/pull/150 for me)

    vue-cleave should update cleave.js dependency version (if compatible...)

    Reviewed by xGouley at 2017-08-30 09:22
Related tags
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.
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

May 4, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Jun 21, 2022
A pattern-placeholder for Vue that changes based on input text.
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.

Apr 19, 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

Nov 21, 2021
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

Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
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

Jun 23, 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

Jun 21, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library
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

Jun 30, 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

Oct 27, 2020
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Mar 4, 2022
A versetile tag input component built with Vue 3 Composition API
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Jun 9, 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

May 22, 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

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

Jun 15, 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.

Apr 26, 2022
Vue Currency Input component allows an easy input of currency formatted numbers
Vue Currency Input component allows an easy input of currency formatted numbers

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

May 25, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)
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 作为全局组

Jan 10, 2022
A vue2 component for manual data masking
A vue2 component for manual data masking

A vue2 component for manual data masking

Jun 16, 2022
A simple, customization star rating component for your vue3 projects

A simple, customization star rating component for your vue3 projects

Jun 27, 2022