# vue-cleave-component

> Vue.js component for cleave.js

Latest version **3.0.2** (published 2022-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-cleave-component
pnpm add vue-cleave-component
yarn add vue-cleave-component
bun add vue-cleave-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2022-10-17 |
| First published | 2017-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.13.0 |
| Dependencies | 1 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 279 |
| Author | ankurk91 |
| Maintainers | ankurk91 |
| Keywords | vue, cleave, formatting, phone, currency, date, masking |

## Links

- npm: https://www.npmjs.com/package/vue-cleave-component
- Repository: https://github.com/ankurk91/vue-cleave-component
- Issues: https://github.com/ankurk91/vue-cleave-component/issues
- npm.io page: https://npm.io/package/vue-cleave-component

## Dependencies (1)

- [cleave.js](https://npm.io/package/cleave.js.md) ^1.6.0

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2022-10-17
- 3.0.1 — 2021-04-25
- 3.0.0 — 2020-11-06
- 2.1.3 — 2019-06-29
- 2.1.2 — 2018-11-28
- 2.1.1 — 2018-08-08
- 2.1.0 — 2018-07-25
- 2.0.1 — 2018-04-28
- 2.0.0 — 2018-04-08
- 1.0.3 — 2018-04-05
- 1.0.2 — 2018-01-13
- 1.0.1 — 2017-12-13
- 1.0.0 — 2017-12-11

## README

# Vue Cleave Component

[![downloads](https://badgen.net/npm/dt/vue-cleave-component)](https://npm-stat.com/charts.html?package=vue-cleave-component&from=2018-01-01)
[![npm-version](https://badgen.net/npm/v/vue-cleave-component)](https://www.npmjs.com/package/vue-cleave-component)
[![github-tag](https://badgen.net/github/tag/ankurk91/vue-cleave-component)](https://github.com/ankurk91/vue-cleave-component/)
[![license](https://badgen.net/github/license/ankurk91/vue-cleave-component)](https://yarnpkg.com/en/package/vue-cleave-component)
[![build](https://github.com/ankurk91/vue-cleave-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-cleave-component/actions)
[![codecov](https://codecov.io/gh/ankurk91/vue-cleave-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-cleave-component)

Vue.js component for [Cleave.js](http://nosir.github.io/cleave.js/)

## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/aza302c7/)

### Version matrix

| Vue.js version | Package version | Branch          |
| :---           | :---:           | ---:           | 
| 2.x            | 2.x             | [2.x](https://github.com/ankurk91/vue-cleave-component/tree/v2.x) |
| 3.x            | 3.x             | master          |

## Features

* Reactive `v-model` value
    - You can change input value programmatically
* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md)
    - You can change config options dynamically
    - Component will watch for any changes and redraw itself
* Compatible with [Bootstrap](http://getbootstrap.com/), [Bulma](http://bulma.io/) 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

<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

```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 `<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](https://github.com/nosir/cleave.js/blob/master/doc/options.md) |
| 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
<!-- 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](https://pnpm.io/) `>=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](https://github.com/facebook/jest)
  and [vue-test-utils](https://github.com/vuejs/vue-test-utils-next) for testing.
* Tests can be found in `__test__` folder
* Execute tests with this command `npm test`

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

## Alternatives

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

* [v-mask](https://github.com/probil/v-mask)
* [vue-input-facade](https://github.com/RonaldJerez/vue-input-facade)
* [maska](https://github.com/beholdr/maska)

## License

[MIT](LICENSE.txt) License

---
_Source: https://npm.io/package/vue-cleave-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._