Vue Cleave Component


Vue.js component for Cleave.js

Demo on JSFiddle

$3

| 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

``bash
npm install vue-cleave-component --save
`

Usage

`html


`

$3

`js
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

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

`html







`

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

$3

* 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