vue-cleave-component
v3.0.2
Published
Vue.js component for cleave.js
Downloads
42,692
Maintainers
Readme
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
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:
| 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/[email protected]"></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.
License
MIT License