Implement Text Mask In Vue JS

Introduction:

The Vue Input Mask sometimes referred to as a masked textbox, is a component that provides a quick and reliable way to collect user input based on a standard mask. You can insert other variables in the conventional format, such as dates, phone numbers, and credit card information.

Prerequisites:

Make sure npm is installed on your machine before beginning this step. To locate and set up the necessary dependencies for our application, we’ll utilize npm. Code editors are also necessary. Visual Studio Code is used throughout the whole course.

Get Started:

Step 1: Set up your project.

After selecting the folder where you wish to launch your Vue project, type the following command into a terminal or command window.

vue create text-mask

Step 2: Install a v-mask in your project.

npm install v-mask

Step 3: Import v-mask in your main.js file

import VueMask from 'v-mask'
.
.
.
Vue.use(VueMask);

Step 4: Add a data object to your HelloWorld component.

data: () => ({
    models: {
      cardModel: "",
      dateModel: "",
      panModel: ""
    },
  }),

Step 5: Add input boxes to your <template> section.

<template>
  <div class="hello">
    <div>
      <label for="card">Card</label>
      <input id="card" type="text" v-mask="'#### #### #### ####'" v-model="models.cardModel" />
    </div>
    <div>
      <label for="date">Date</label>
      <input id="date" type="text" v-mask="'##/##/####'" v-model="models.dateModel" />
    </div>
    <div>
      <label for="pan">Pan Card</label>
      <input type="pan" v-mask="'AAAAA####A'" v-model="models.panModel" />
    </div>
  </div>
</template>

In the v-mask attribute, ‘#’ is used for numbers and ‘A’ is used for alphabets.

Default patterns: