I'm using Vuetify 3 and Maska, which provides masking of input values. I need to put a mask for phone numbers on v-text-field.

The documentation describes how it works with a regular HTML input element, but I need to put the mask on the Vuetify v-text-field ponent. How to do it?

I tried:

  <v-text-field
    label="Телефон"
    variant="solo"
    class="mt-3"
    clearable
    v-maska data-maska="+7(###)-###-##-##"
    v-model="form.phone"
    :error-messages="v$.form.phone.$errors.map(e => e.$message)"  
  ></v-text-field>

but it is not working. I have registered the directive with:

directives: { maska: vMaska }

I'm using Vuetify 3 and Maska, which provides masking of input values. I need to put a mask for phone numbers on v-text-field.

The documentation describes how it works with a regular HTML input element, but I need to put the mask on the Vuetify v-text-field ponent. How to do it?

I tried:

  <v-text-field
    label="Телефон"
    variant="solo"
    class="mt-3"
    clearable
    v-maska data-maska="+7(###)-###-##-##"
    v-model="form.phone"
    :error-messages="v$.form.phone.$errors.map(e => e.$message)"  
  ></v-text-field>

but it is not working. I have registered the directive with:

directives: { maska: vMaska }

• javascript
• vue.js
• vuetify.js

2 Answers 2

I had the same issue and solved it like this:

<script setup>
import {ref} from "vue";
import { vMaska } from "maska";

const options = { mask: '#-#' };
const myValue = ref('');
</script>

<template>
  <div>
    <v-text-field v-maska:[options] v-model="myValue"/>
  </div>
</template>

Hope it helps!

In Maska 3, this works:

<template>
  <v-text-field
    v-maska:myValue.unmasked="'+7(###)-###-##-##'"
  />
</template>
<script setup>
const myValue = ref()
</script>

Note: no v-model, it is only used when binding the masked value manually.

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  directives: {maska: window.Maska.vMaska},
  template: `
      <v-app>
        <v-main>
          <v-container>

            <v-text-field v-maska:form.phone.unmasked="'+7(###)-###-##-##'"/>
            
            <pre>form: {{form}}</pre>
          
          </v-container>
        </v-main>
      </v-app>
  `,
  setup(){
    return {
      form: ref({phone: null})
    }
  }

}
const a = createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg./vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://unpkg./[email protected]/dist/cdn/vue.js"></script>

Old answer:

I don't see an option in the documentation, where you can change the event and value processed by the Maska directive, and as you said, it does not seem to work with regular modelValue/@update:modelValue.

But you can use Maska programmatically and mask the input and unmask the output to v-text-field.

Just create a mask instance with

const mask = new Mask({ mask: '+7(###)-###-##-##' })

and in your v-text-field, replace v-model with updated in- and output:

      <v-text-field
        label="Телефон"
        :model-value="mask.masked(phone)"
        @update:model-value="value => phone = mask.unmasked(value)"
      ></v-text-field>

(Again, make sure to remove v-model)

It works in the snippet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const { Mask } = Maska
const vuetify = createVuetify()
const app = {
  setup(){
    return {
      phone: ref('123'),
      mask: new Mask({ mask: '+7(###)-###-##-##' }),
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-text-field
        label="Телефон"
        variant="solo"
        class="mt-3"
        clearable
        :model-value="mask.masked(phone)"
        @update:model-value="value => phone = mask.unmasked(value)"
      ></v-text-field>
      Number: {{phone}}
   </v-main>
  </v-app>
</div>
<script src="https://unpkg./vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify-labs.js"></script>
<script src="https://cdn.jsdelivr/npm/maska@2/dist/maska.umd.js"></script>