vee-mask

Tiny and dependency free mask input for VueJS

Usage no npm install needed!

<script type="module">
  import veeMask from 'https://cdn.skypack.dev/vee-mask';
</script>

README

Vee Mask

npm npm Maintenance

vee-mask is a tiny and dependency free mask input for Vue.js that allows you to easily mask your input fields based on tokens.

NOTICE

I've created this package from a fork of vue-the-mask due to lack of maintenance; the need of some extra features; and code fixes well discussed in the original repository. But still, props to the original algorithms from @neves 🙌

Install

yarn add vee-mask
or
npm i -S vee-mask

Usage

Globally

import VeeMask from 'vee-mask'
Vue.use(VeeMask)

…or, Locally (as directive)

import { mask } from 'vee-mask'
export default {
  directives: { mask },
}

Tokens

'*': { pattern: /./ },
'#': { pattern: /\d/ },
'X': { pattern: /[0-9a-zA-Z]/ },
'S': { pattern: /[a-zA-Z]/ },
'A': { pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase() },
'a': { pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase() },
'N': { pattern: /[a-zA-Z0-9]/, transform: v => v.toLocaleUpperCase() },
'n': { pattern: /[a-zA-Z0-9]/, transform: v => v.toLocaleLowerCase() },
'!': { escape: true }

Properties

Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
tokens false Object tokens Custom tokens for mask

License

This project is licensed under MIT License