How to use mask in a Vue.js Vuetify text field?

Sometimes, we want to use mask in a Vue.js Vuetify text field.

In this article, we’ll look at how to use mask in a Vue.js Vuetify text field.

How to use mask in a Vue.js Vuetify text field?

To use mask in a Vue.js Vuetify text field, we can use the v-mask package.

To install it, we run

npm install v-mask

Then in main.js, we register the directive globally with

import { VueMaskDirective } from "v-mask";
Vue.directive("mask", VueMaskDirective);

Then we use it with v-text-field by writing

<template>
  <div>
    <v-text-field
      v-mask="'###.###.###-##'"
      :value="currentValue"
      @input="handleInput"
    />
  </div>
</template>

We set v-mask to the mask we want.

Conclusion

To use mask in a Vue.js Vuetify text field, we can use the v-mask package.