The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
You can use patterns like:
<input type="text" v-mask="'99/99'" />// Turns 1224 in 12/24<input type="text" v-mask="'(99) 9999-9999'" />// Turns 1149949944 in (11) 4994-9944<input type="text" v-mask="'AAA-9999'" />// Turns ABC1234 in ABC-1234You can also format money:
<input type="text" v-mask="'money'" />// Turns 123499 in 1.234,99This directive can also receive a object from your data like:
<template> <p> <input v-mask="mask" type="text"> </p></template> <script> export default { data() { return { mask: '999.999.999-99' } } }</script>Sample using import:
<script>import Component from './components/Component'import AwesomeMask from 'awesome-mask' export default { name: 'app', components: { Component }, directives: { 'mask': AwesomeMask }}</script>