Vue.js component for Cleave.js
Clone or download
Latest commit ba4670e Dec 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Upgrade deps Jul 14, 2018
__test__ Convert template to render function Nov 14, 2018
examples upgrade deps Nov 28, 2018
src Convert template to render function Nov 14, 2018
.babelrc Upgrade deps Dec 18, 2018
.editorconfig Upgrade deps Sep 18, 2018
.gitattributes Upgrade deps Sep 18, 2018
.gitignore Upgrade deps Sep 18, 2018
.travis.yml chore: switch to webpack-dev-server Nov 18, 2018
CHANGELOG.md Version 2.1.2 Nov 28, 2018
LICENSE.txt Housekeeping Jan 7, 2018
README.md Upgrade deps Dec 18, 2018
package.json Upgrade deps Dec 18, 2018
webpack.config.dev.js upgrade deps Nov 28, 2018
webpack.config.js Upgrade deps Dec 18, 2018
yarn.lock Upgrade deps Dec 18, 2018

README.md

Vue Cleave Component

downloads npm-version github-tag license build-status codecov

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/vue@2.5"></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

  • ⚠️ 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