[Vuejs]-Use Maska input mask with Vuetify 3 text-field

by

6👍

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!

👤Leopholdo Ishibashi

2👍

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.net/npm/vuetify@3.1.8/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/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.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify-labs.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
👤Moritz Ringler

Leave a comment