vMask

A Vue directive — attach in the template. Imported from tinyval-mask/vue.

Signature

const vMask: Directive<HTMLElement, MaskInput | { mask: MaskInput; placeholder?: string; raw?: boolean; onChange?: (state: MaskState) => void }>

Usage	In the field	In v-model
v-mask="phoneMask"	+7 (999) 123-45-67	'+7 (999) 123-45-67'
v-mask.raw="phoneMask"	+7 (999) 123-45-67	'79991234567'
v-mask="{ mask: phoneMask, placeholder: '_' }"	+7 (999) 12_-__-__	'+7 (999) 12'
v-mask.raw="{ mask: phoneMask, placeholder: '_' }"	+7 (999) 12_-__-__	'7999912'

• The mask is a mask object, a pattern string, an array of patterns or createMask options.
• If the value changes (another phone country), the mask is updated.
• On a wrapper it looks for an <input> inside — works with UI library fields and <TvField>.
• onChange in the options object receives { value, raw, complete, valid } — e.g. to highlight the field or enable a button. It's called only when the state changes, so the object can be written inline in the template.
• The mask is removed on unmount.

Example

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phone, type PhoneCountry } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const country = ref<PhoneCountry>('ru');
const phoneMask = computed(() => phone(country.value));
const tel = ref('');
</script>

<template>
  <select v-model="country">
    <option value="ru">RU</option>
    <option value="by">BY</option>
  </select>
  <input v-model="tel" v-mask.raw="{ mask: phoneMask, placeholder: '_' }" inputmode="tel" />
  <!-- tel: '79991234567' -->
</template>

Is the field filled correctly

<script setup lang="ts">
const cardMask = card();
const cardOk = ref(false);
</script>

<template>
  <input v-model="number" v-mask.raw="{ mask: cardMask, onChange: (s) => (cardOk = s.valid) }" :class="{ error: number && !cardOk }" />
  <button :disabled="!cardOk">Pay</button>
</template>

See also

• Vue
• attach