Vue Cleave Component

Vue.js component for Cleave.js

Demo on JSFiddle

Version matrix

Features

• 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

Installation

npm install vue-cleave-component --save

Usage

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

<script>
    import Cleave from 'vue-cleave-component';

    export default {
        data() {
            return {
                cardNumber: null,
                options: {
                    creditCard: true,
                    delimiter: '-',
                }
            }
        },
        components: {
            Cleave
        }
    }
</script>

As plugin

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

This will register a global component <cleave>

Available props

The component accepts these props:

Install in non-module environments (without webpack)

• Include required files

<!-- cleave.js -->
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
<script>
    const app = Vue.createApp({});
    app.use(VueCleave);
    app.mount('#app');
</script>

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=18.9 and pnpm >=7.x pre-installed
• Install dependencies pnpm install
• Run webpack dev server npm start
• This should open the demo page in your default web browser

Testing

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

Changelog

Please see CHANGELOG for more information what has changed recently.

Alternatives

If you feel this component heavy, then you can consider these packages.

• v-mask
• vue-input-facade
• maska

License

MIT License

Changelog

3.0.1

• Fix: delimiters and prefix was not working on initial load #37

3.0.0

• Drop support for Vue v2.x and add support for Vue v3.x
• Drop IE 11 support

2.1.3

• Fix: input event was being emitted on load, #25

2.1.2

• Change:
  • removed type prop, however this should work as before
  • convert template to render function to reduce build size

2.1.1

• Fix: blur event implementation, #13

2.1.0

• Add: blur event, #12
  • If you were using `@blur.nativepreviously then replace it with@blur`
• Chore: webpack v4

2.0.1

• Fix: preserve original onValueChanged callback

2.0.0

• Fix: CTRL+X (cut event) was not updating v-model, #3
• Change: Minimum cleave.js version requirement is v1.3.1
• Change: Now using onValueChanged callback to detect changes in value

1.0.3

• Fix: Cursor jump issues

1.0.0

• Initial release