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>
    const app = Vue.createApp({}).mount('#app')
    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.

Alternatives

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

License

MIT License

dystudio / vue-cleave-component Goto Github PK

vue-cleave-component's Introduction