v-slim-mask v1.0.24

V-SLIM-MASK

A incredibly LIGHTER input mask directive and filter compatible with Vue 3

Browsers support

Instalation

$ yarn add v-slim-mask

or

$ npm install --save v-slim-mask

// Import the directive inside your main.(js|ts)

import { VMaskDirective } from 'v-slim-mask'

createApp(App).directive('mask', VMaskDirective).mount('#app')

or

// using a custom directive

import { getCustomMaskDirective } from 'v-slim-mask'

const VMASKCustomDirective = getCustomMaskDirective({
  '#': /[0-9]/,
  Z: /[a-z]|[A-Z]/,
})
createApp(App).directive('mask', VMASKCustomDirective).mount('#app')

Config

Tokens

Modifiers

Usage

Using native input element

// Inside your .vue component

<template>
  <input v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        cpf: '',
      }
    },
  })
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"

Using in a parent input element

<template>
  <BaseInputComponent v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        cpf: '',
      }
    },
  })
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"

// BaseInputComponent.vue
<template>
  <div>
    <label>Base label</label>
    <input />
  </div>
</template>

Using Composition API

// using reactive
<template>
  <input v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const state = reactive({
        cpf: '', // cannot be undefined
      })

      return state
    },
  }
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"

// using ref
<template>
  <input v-mask="{mask: 'NNN.NNN.NNN-NN', model: 'cpf' }" />
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      return { cpf: ref('') } // cannot be undefined
    },
  }
</script>

// Entry => 99999999999 | cpf => "999.999.999-99"

// BaseInputComponent.vue
<template>
  <div>
    <label>Base label</label>
    <input />
  </div>
</template>

Using helper functions

<script>
  import { defineComponent } from "vue";
  import { maskTransform, unmaskTransform } from 'v-slim-mask'

  export default defineComponent({
    computed: {
      phoneFormatted(val) {
        return maskTransform(val, '(NN) NNNNN - NNNN')
      }
    }
  })
</script>

Demo

Vue 3.0.0 Sample

https://codesandbox.io/s/vue-3-v-slim-mask-wy3po?file=/src/App.vue