Vue.js 2.x component for Cleave.js

Vue.js 2.x component for Cleave.js

Vue.js component for cleave.js

Vue Cleave Component

downloads npm-version github-tag license build-status codecov

Vue.js component for Cleave.js

Demo on JSFiddle


  • Reactive v-model value
    • You can change input value programmatically
  • Reactive options, read caveats below
    • You can change config options dynamically
    • Component will watch for any changes and redraw itself
    • You are suggested to modify config via Vue.set
  • Compatible with Bootstrap, Bulma or any other CSS framework
  • Works with validation libraries
  • Option to disable raw mode to get masked value


# npm
npm install vue-cleave-component --save

# Yarn
yarn add vue-cleave-component


    <cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave>

  import Cleave from 'vue-cleave-component';
  export default {    
    data () {
      return {
        cardNumber: null, 
        options: {
          creditCard: true,
          delimiter: '-',
    components: {

As plugin

  import Vue from 'vue';
  import Cleave from 'vue-cleave-component';

This will register a global component <cleave>

Available props

The component accepts these props:

Attribute Type Default Description
v-model / value String / Number / null null Set or Get input value (required)
options Object {} Cleave.js options
raw Boolean true When set to false; emits formatted value with format pattern and delimiter

Install in non-module environments (without webpack)

  • Include required files
<!-- cleave.js -->
<script src="[email protected]"></script>
<!-- Vue.js -->
<script src="[email protected]"></script>
<!-- Lastly add this package -->
<script src="[email protected]"></script>
  • Use the component anywhere in your app like this
<main id="app">  
    <cleave v-model="card" :options="options"></cleave> 
  // Initialize global component
  new Vue({
    el: '#app',
    data: {
      card: null,
      options: {
        creditCard: true,

Run examples on your localhost

  • Clone this repo
  • You should have node-js >=6.10 and yarn >=1.x pre-installed
  • Install dependencies yarn install
  • Run webpack dev server yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser


  • This package is using Jest and vue-test-utils for testing.
  • Tests can be found in __test__ folder
  • Execute tests with this command yarn test


Please see CHANGELOG for more information what has changed recently.


  • :warning: Don't pass config option as inline literal object to :options prop.
<!-- This will cause an infinite loop -->
<cleave v-model="card" :options="{creditCard:true}"></cleave>
  • Vue.js can not detect changes when literal object/arrays passed within template, see


MIT License

Github Repository

Tags: #VueJs #Input