vue-3-mask

vue-3-mask

A simple input mask library for Vue.js 3, inspired by vue-the-mask. This library allows you to create input masks for fields in your Vue.js 3 application easily.

Installation

Install the library using npm or yarn:

npm install vue-3-mask

or

yarn add vue-3-mask

Usage

Global registration

In your Vue 3 application, open the main.js (or main.ts) file and import the MaskInput component from the vue-3-mask library. Register it globally:

import { createApp } from 'vue';
import App from './App.vue';
import { MaskInput } from 'vue-3-mask';

const app = createApp(App);

app.component('MaskInput', MaskInput);

app.mount('#app');

Now you can use the MaskInput component throughout your application.

Local registration

If you prefer to register the component locally, you can do so in the components section of your Vue component:

import { MaskInput } from 'vue-3-mask';

export default {
  components: {
    MaskInput,
  },
};

Using MaskInput in your components

Using MaskInput in your components To use the MaskInput component in your Vue components, simply include it in your template and provide a mask prop with the desired pattern. The following mask patterns are supported:

#: Any digit (0-9)
X: Any alphanumeric character (0-9, a-z, A-Z)
S: Any alphabetic character (a-z, A-Z)
A: Any uppercase alphabetic character (A-Z)
a: Any lowercase alphabetic character (a-z)
!: Escape character (use the next character in the mask as a literal)

Here's an example of using the MaskInput component with a phone number mask:

<template>
  <div>
    <h1>Phone number input example</h1>
    <MaskInput v-model="phoneNumber" mask="(##) ####-####" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
    };
  },
};
</script>

In this example, the MaskInput component will enforce the provided phone number mask as the user types, and the masked value will be stored in the phoneNumber data property.

Contributing

We welcome contributions to the vue-3-mask library. If you find a bug or have an idea for a new feature, please feel free to open an issue or submit a pull request. Before