Vue Cleave Component

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

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

# yarn
yarn add vue-cleave-component

# npm
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({}).mount('#app')
app.use(Cleave);

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="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
<script>
    // Init as global component
    app.use(VueCleave);
</script>

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

Testing

• 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

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License