Vue.js component for Cleave.js
Demo on JSFiddle
| Vue.js version | Package version | Branch |
|---|---|---|
| 2.x | 2.x | 2.x |
| 3.x | 3.x | master |
- Reactive
v-modelvalue- 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
rawmode to get masked value
npm install vue-cleave-component --save<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>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>
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 |
- 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>- Clone this repo
- Make sure you have node-js
>=18.9and pnpm>=7.xpre-installed - Install dependencies
pnpm install - Run webpack dev server
npm start - This should open the demo page in your default web browser
- 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
Please see CHANGELOG for more information what has changed recently.
If you feel this component heavy, then you can consider these packages.
MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent