diff --git a/README.md b/README.md index 6cdd2b9d..6237cb9a 100644 --- a/README.md +++ b/README.md @@ -216,6 +216,10 @@ Then easily you can apply `cleave` directive to `input` field: More usage in documentation: [Angular directive usage](https://github.com/nosir/cleave.js/blob/master/doc/angularjs-directive-usage.md) +## Use in VueJs +While this package does not have an official support for use in VueJs. This can be done in few simple steps. +Please check [here](https://github.com/nosir/cleave.js/blob/master/doc/vue.md) + ## jQuery fn usage Please check [here](https://github.com/nosir/cleave.js/issues/341) diff --git a/doc/vue.md b/doc/vue.md new file mode 100644 index 00000000..1e3113bd --- /dev/null +++ b/doc/vue.md @@ -0,0 +1,59 @@ +# Use in VueJs +Please check [here](https://github.com/nosir/cleave.js/issues/341) + +While this package does not have an official support for use in VueJs. This can be done in few simple steps. + +## To use globally + +```js +import Vue from 'vue' +import Cleave from 'cleave.js'; + +Vue.directive('cleave', { + inserted: (el, binding) => { + el.cleave = new Cleave(el, binding.value || {}) + }, + update: (el) => { + const event = new Event('input', {bubbles: true}); + setTimeout(function () { + el.value = el.cleave.properties.result + el.dispatchEvent(event) + }, 100); + } +}) +``` + +## To use as a local local directive + +```js +import Cleave from 'cleave.js'; +export default { + + ... + directives: { + cleave: { + inserted: (el, binding) => { + el.cleave = new Cleave(el, binding.value || {}) + }, + update: (el) => { + const event = new Event('input', {bubbles: true}); + setTimeout(function () { + el.value = el.cleave.properties.result + el.dispatchEvent(event) + }, 100); + } + } + } + ... +} +``` + +And use it in your HTML like + +```html + + + +``` + +Here is a [codesandbox](https://codesandbox.io/s/cleave-js-vue-integration-qmw28)