vue-imask

esm cjs
Vue input mask
Version 7.6.1 License MIT
Keywords
vueimaskjavascriptinputmask
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 7.6.1
- 7.6.0
- 7.5.0
- 7.4.0
- 7.3.0
- 7.2.1
- 7.2.0
- 7.1.3
- 7.1.2
- 7.1.1
- 7.1.0
- 7.0.1
- 7.0.0
- 6.6.3
- 6.6.2
- 6.6.1
- 6.6.0
- 6.5.1
- 6.5.0
- 6.4.3
- 6.4.2
- 6.4.0
- 6.3.0
- 6.2.2
- 6.2.0
- 6.1.0
- 6.0.7
- 6.0.6
- 6.0.5
- 6.0.3
- 6.0.2
- 6.0.1
- 6.0.0
- 5.2.1
- 5.2.0
- 5.1.9
- 5.1.8
- 5.1.7
- 5.1.6
- 5.1.5
- 5.1.4
- 5.1.3
- 5.1.2
- 5.1.1
- 5.1.0
- 5.0.0
- 4.1.5
- 4.1.4
- 4.1.3
- 4.1.2
- 4.1.1
- 4.1.0
- 4.0.0
- 3.4.1
- 3.4.0
- 3.3.0
- 3.2.4
- 3.2.3
- 3.2.2
- 1.2.0
- 1.1.0
- 1.0.0
- 0.0.1
- 7.5.1-alpha.0
- 7.3.1-alpha.0
- 7.1.0-alpha.2
- 7.1.0-alpha.1
- 7.1.0-alpha.0
- 7.0.1-alpha.1
- 7.0.1-alpha.0
- 7.0.0-alpha.6
- 7.0.0-alpha.5
- 7.0.0-alpha.4
- 7.0.0-alpha.3
- 7.0.0-alpha.2
- 7.0.0-alpha.1
- 7.0.0-alpha.0
- 6.6.1-alpha.2
- 6.6.1-alpha.1
- 6.6.1-alpha.0
- 6.6.0-alpha.0
- 6.5.1-alpha.1
- 6.5.1-alpha.0
- 6.5.0-alpha.1
- 6.5.0-alpha.0
- 6.4.3-alpha.1
- 6.4.3-alpha.0
- 6.4.1-alpha.0
- 6.3.0-alpha.0
- 6.0.0-alpha.0
Vue IMask Plugin
vue-imask

Install
npm i vue-imask
for Vue 2 also do:
npm i -D @vue/composition-api
If you are using NuxtJS with Vue 2 you also need to install:
npm i -D @nuxtjs/composition-api
And then add @nuxtjs/composition-api/module
in the buildModules option in your nuxt.config.js
.
Mask Component Example (Vue 2)
<template>
<imask-input
v-model="numberModel"
:mask="Number"
radix="."
:unmask="true"
<!-- depending on prop above first argument of 'accept' callback is
`value` if `unmask=false`,
`unmaskedValue` if `unmask=true`,
`typedValue` if `unmask='typed'` -->
@accept="onAccept"
<!-- ...see more mask props in a guide -->
<!-- other input props -->
placeholder='Enter number here'
/>
</template>
<script>
import { IMaskComponent } from 'vue-imask';
export default {
data () {
return {
numberModel: '',
onAccept (value) {
console.log(value);
}
}
},
components: {
'imask-input': IMaskComponent
}
}
</script>
Mask Component Example (Vue 3)
<template>
<imask-input
<!-- possible to use 'v-model' = 'v-model:value' = 'v-model:masked' and 'v-model:unmasked' -->
v-model:typed="numberModel"
:mask="Number"
radix="."
@accept:masked="onAccept" <!-- accept value (same as '@accept:value' or just '@accept') -->
@accept:unmasked="onAcceptUnmasked"
<!--
@accept:typed="onAccepttyped"
@complete:typed="onCompleteTyped"
-->
<!-- ...see more mask props in a guide -->
<!-- other input props -->
placeholder='Enter number here'
/>
</template>
<script>
import { IMaskComponent } from 'vue-imask';
export default {
data () {
return {
numberModel: '',
onAccept (value) {
console.log({ value });
},
onAcceptUnmasked (unmaskedValue) {
console.log({ unmaskedValue });
}
}
},
components: {
'imask-input': IMaskComponent
}
}
</script>
Mask Directive Example
In some cases value bindings (v-model
) might not work for directive, you can use @accept
or @complete
events to update the value.
<template>
<input
:value="value"
v-imask="mask"
@accept="onAccept"
@complete="onComplete">
</template>
<script>
import { IMaskDirective } from 'vue-imask';
export default {
data () {
return {
value: '',
mask: {
mask: '{8}000000',
lazy: false
},
},
},
methods: {
onAccept (e) {
const maskRef = e.detail;
this.value = maskRef.value;
console.log('accept', maskRef.value);
},
onComplete (e) {
const maskRef = e.detail;
console.log('complete', maskRef.unmaskedValue);
},
},
directives: {
imask: IMaskDirective
}
}
</script>
More options see in a guide.
Mask Composable (Vue 3)
<template>
<input ref="el">
</template>
<script>
import { useIMask } from 'vue-imask';
export default {
setup (props) {
const { el, masked } = useIMask({
mask: Number,
radix: '.',
}, /* optional {
emit,
onAccept,
onComplete,
defaultValue,
defaultUnmaskedValue,
defaultTypedValue,
} */);
return { el };
}
}
</script>