Vue Cleave Component

Vue.js component for Cleave.js

Demo on JSFiddle

Features

• Reactive v-model value
  • You can change input value programmatically
• Reactive options, read caveats below
  • You can change config options dynamically
  • Component will watch for any changes and redraw itself
  • You are suggested to modify config via Vue.set
• Compatible with Bootstrap, Bulma or any other CSS framework
• Works with validation libraries
• Option to disable raw mode to get masked value

Installation

# npm
npm install vue-cleave-component --save

# Yarn
yarn add vue-cleave-component

Usage

<template>
  <div>
    <cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave>
  </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 Vue from 'vue';
  import Cleave from 'vue-cleave-component';
  Vue.use(Cleave);

This will register a global component <cleave>

Available props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | v-model / value | 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@2"></script>

• Use the component anywhere in your app like this

<main id="app">  
    <cleave v-model="card" :options="options"></cleave> 
</main>
<script>
  // Initialize global component
  Vue.use(VueCleave);
  
  new Vue({
    el: '#app',
    data: {
      card: null,
      options: {
        creditCard: true,
      }
    },    
  });
</script>

Run examples on your localhost

• Clone this repo
• You should have node-js >=6.10 and yarn >=1.x 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.

Caveats

• :warning: Don't pass config option as inline literal object to :options prop.

<!-- This will cause an infinite loop -->
<cleave v-model="card" :options="{creditCard:true}"></cleave>

• Vue.js can not detect changes when literal object/arrays passed within template, see

License

MIT License