https://github.com/mustafacagri/vue-mask-next
⭐️ vue-mask-next: Empower your Vue 3 applications with effortless input field masking. Seamlessly apply custom patterns for enhanced user experience and data accuracy. 🎉
https://github.com/mustafacagri/vue-mask-next
input mask vue vue-input vue-input-mask vue-mask vue-masked-input vue3 vuejs vuejs3
Last synced: about 1 month ago
JSON representation
⭐️ vue-mask-next: Empower your Vue 3 applications with effortless input field masking. Seamlessly apply custom patterns for enhanced user experience and data accuracy. 🎉
- Host: GitHub
- URL: https://github.com/mustafacagri/vue-mask-next
- Owner: mustafacagri
- Created: 2024-05-06T23:51:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-07T21:59:21.000Z (about 1 year ago)
- Last Synced: 2025-04-15T23:39:44.822Z (about 1 month ago)
- Topics: input, mask, vue, vue-input, vue-input-mask, vue-mask, vue-masked-input, vue3, vuejs, vuejs3
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-mask-next
- Size: 3.91 KB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**vue-mask-next** is a simple input mask library for Vue.js 3, designed to facilitate the creation of input masks for fields in your Vue.js 3 applications. This library is inspired by vue-3-mask but provides additional functionality such as prefilled value support, and it currently works with Vue version 3.4.26+, composition API, and script setup.
## Installation
Install the library via npm or yarn:
```bash
npm install vue-mask-next
```
or
```bash
yarn add vue-mask-next
```
## Usage
### Global Registration
In your Vue 3 application, open the `main.js` (or `main.ts`) file and import the `MaskInput` component from the `vue-mask-next` library. Register it globally:
```javascript
import { createApp } from "vue";
import App from "./App.vue";
import { MaskInput } from "vue-mask-next";
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:
```javascript
import { MaskInput } from "vue-mask-next";
export default {
components: {
MaskInput,
},
};
```
### 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. Various 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:
```vue
Phone number input example
export default {
data() {
return {
phoneNumber: "",
};
},
};
```
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.
### Usage of v-bind="$attrs"
The `$attrs` object allows you to pass additional attributes to the underlying input element. Here are some examples:
- Binding a placeholder:
```vue
```
- Binding a CSS class:
```vue
```
- Binding an event handler:
```vue
```
In each of these examples, the additional attribute is forwarded to the underlying input element using `v-bind="$attrs"`, allowing for flexible usage and customization.
## Implementation Details
The `MaskInput` component implementation utilizes the following:
- A template with a single `` element, bound to the `value` data property using `v-model`.
- The `$attrs` object, which forwards any attributes passed to the component to the underlying input element using `v-bind="$attrs"`. This allows users to apply additional attributes directly to the input element.
- Script setup with props, including a required prop `mask` specifying the masking pattern.
- Mask definitions allowing different characters to be interpreted differently in the mask pattern.
- The `applyMask` function, which applies the masking logic to generate the masked value.
- The `handleInput` function, triggered on input events, applies the mask to the input value, updating the `value` data property accordingly.
## How can I support?
⭐ Star my GitHub repo
🛠 Create pull requests, submit bugs, suggest new features or updates
## Contributing
Contributions to the `vue-mask-next` library are welcome. If you encounter a bug or have an idea for a new feature, please feel free to open an issue or submit a pull request.