Skip to content
🔡 Tiny input mask library for Vue.js (directive)
JavaScript HTML Shell
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci CI: add build artifacts (for BundleSize plugin) Aug 3, 2019
.github Create FUNDING.yml Aug 14, 2019
build fix: typo May 22, 2019
dist build: build 2.0.2 Aug 3, 2019
scripts chore: lint code before release Feb 8, 2018
src style: fix errors after upgrading to `eslint-config-airbnb-base@v14` Aug 22, 2019
tests/e2e test: add more real world masks Jul 27, 2019
.editorconfig Initial release Aug 12, 2016
.eslintignore
.eslintrc.json chore(deps): update eslint config Feb 8, 2018
.gitignore
.npmignore chore(npm): remove useless stuff from npm package (tests, docs, configs) Jul 19, 2019
CODE_OF_CONDUCT.md
ISSUE_TEMPLATE.md Create ISSUE_TEMPLATE.md Feb 12, 2018
LICENSE Initial release Aug 12, 2016
README-pt.md docs(README): use h3 instead of h4 Oct 13, 2019
README.md docs(README): use h3 instead of h4 Oct 13, 2019
babel.config.js chore(babel): add `not dead` to the list of supported browsers Aug 3, 2019
jest.config.js
package-lock.json
package.json chore(deps): update dependency rollup to v1.27.0 Nov 12, 2019
renovate.json chore: enable auto-merge minor versions of packages Jul 9, 2019

README.md

🔡 Vue input mask

npm Github file size npm GitHub license Vue2 jsDelivr Tested with TestCafe

Tiny input mask library for vue.js based on text-mask-core (~4kb) exposed as directive. No dependencies

🎨 Playground on the Web

✔️ Browser Support

Chrome Firefox Safari Opera Edge IE iOS Safari Android WebView Android WebView
74+ ✔️ 66+ ✔️ 12+ ✔️ 46+ ✔️ 17+ ✔️ 11+ ✔️ 12+ ✔️ 67+ ✔️ 8.2+ ✔️

We support only browsers with global usage statistics greater then 1%, last 2 version of each browser but not dead browsers. Library may work in older browser but we don't not guarantee that. You may need addition polyfills to make it work.

💿 Installation

This version requires Vue 2.X. If you are looking for Vue 1.X, check it here.

npm install v-mask

Initialization

ES2015 (Webpack/Rollup/Browserify/etc)

import Vue from 'vue'

// As a plugin
import VueMask from 'v-mask'
Vue.use(VueMask);

// Or as a directive
import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
// As a plugin
Vue.use(VueMask.VueMaskPlugin);

// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);
</script>

🚀 Usage

<input type="text" v-mask="'####-##'" v-model="myInputModel">
<!-- OR -->
<input type="text" v-mask="nameOfVariableWithMask" v-model="myInputModel">

Notice: v-model is required starting from v1.1.0, because a lot of bugs with HTMLElement event listeners and sync with Vue internals.

There is no reason to support using this lib for using without v-model but open the door for using on custom inputs.

⚙️ Configs

List of supported placeholders:

Value Format
# Number (0-9)
A Letter in any case (a-z,A-Z)
N Number or letter
X Any symbol
? Optional (next character)

💉 Tests

Jest is used for unit-tests.

Unit-tests can be executed by typing this command in your terminal:

npm test

TestCafe is used of E2E testing.

E2E-tests can be executed by typing this command in your terminal:

npm test:e2e

⚓️ Semantic Versioning Policy

This plugin follows semantic versioning.

📰 Changelog

We're using GitHub Releases.

🍻 Contributing

We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

Notice: You should make your changes only in src folder, don't try to edit files from dist as it compiled from src by babel and shouldn't be changes manually.

🔒 License

See the LICENSE file for license rights and limitations (MIT).

You can’t perform that action at this time.