JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-the-mask"></script>
<div id="app">
  <input v-mask="options" />
</div>

JavaScript

new Vue({
	el: '#app',
  data: () => ({
    options: {
    	mask: '9\' 29"',
      tokens: {
        2: { pattern: /[0-1]/ },
      	9: { 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() },
        '!': { escape: true }
      }
    }
  }),
  directives: {
  	mask: VueTheMask.mask
  }
})