Awesome Open Source
Awesome Open Source

Vue Cleave Component

downloads npm-version github-tag license build codecov

Vue.js component for Cleave.js

Demo on JSFiddle

Version matrix

Vue.js version Package version Branch
2.x 2.x 2.x
3.x 3.x master


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


# yarn
yarn add vue-cleave-component

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


        <cleave v-model="cardNumber"

    import Cleave from 'vue-cleave-component';

    export default {
        data() {
            return {
                cardNumber: null,
                options: {
                    creditCard: true,
                    delimiter: '-',
        components: {

As plugin

  import {createApp} from 'vue';
import Cleave from 'vue-cleave-component';
// your app initilization logic goes here
const app = createApp({}).mount('#app')

This will register a global component <cleave>

Available props

The component accepts these props:

Attribute Type Default Description
v-model 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>
    // Init as global component

Run examples on your localhost

  • Clone this repo
  • You should have node-js >=12.13 and yarn >=1.22 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.


MIT License

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,965
vue (4,211
formatting (33