npmpackage.info

vue-imask

vanilla javascript input mask

7.6.1

5,009

MIT

TypeScript

17.25 kB

4,100,324 3.6

Installations

npm install vue-imask

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

21.7.3

NPM Version

lerna/8.1.2/node@v21.7.3+arm64 (darwin)

Score

82.5

Supply Chain

98.3

Quality

79.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

15

Total

192

Closed

106

Merged

71

Issues

Open

52

Total

748

Closed

696

Releases

v7.6.1

Published on 21 May 2024

v7.6.0

Published on 09 Apr 2024

v7.5.0

Published on 28 Feb 2024

v7.4.0

Published on 08 Feb 2024

v7.3.0

Published on 25 Dec 2023

v7.2.1

Published on 18 Dec 2023

View all 71 releases

Contributors

Unable to fetch Contributors

View all 29 contributors

Languages

TypeScript

JavaScript

HTML

Ruby

TypeScript (93.31%)

JavaScript (3.67%)

HTML (2.96%)

Ruby (0.05%)

Developer

uNmAnNeR

Download Statistics

Total Downloads

4,100,324

Last Day

6,013

Last Week

27,018

Last Month

105,214

Last Year

1,591,798

GitHub Statistics

5,009 Stars

956 Commits

262 Forks

30 Watching

9 Branches

29 Contributors

Bundle Size

64.26 kB

Minified

17.25 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

7.6.1

Package Id

vue-imask@7.6.1

Unpacked Size

142.65 kB

Size

27.39 kB

File Count

NPM Version

lerna/8.1.2/node@v21.7.3+arm64 (darwin)

Node Version

21.7.3

Publised On

21 May 2024

Total Downloads

Cumulative downloads

Total Downloads

4,100,324

Last day

-3.4%

6,013

Compared to previous day

Last week

-5.6%

27,018

Compared to previous week

Last month

-2.4%

105,214

Compared to previous month

Last year

68.5%

1,591,798

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Vue IMask Plugin

vue-imask

Install

npm i vue-imask

for Vue 2 also do:

npm i -D @vue/composition-api

If you are using NuxtJS with Vue 2 you also need to install:

npm i -D @nuxtjs/composition-api

And then add @nuxtjs/composition-api/module in the buildModules option in your nuxt.config.js.

Mask Component Example (Vue 2)

1<template>
2  <imask-input
3    v-model="numberModel"
4    :mask="Number"
5    radix="."
6    :unmask="true"
7    <!-- depending on prop above first argument of 'accept' callback is
8    `value` if `unmask=false`,
9    `unmaskedValue` if `unmask=true`,
10    `typedValue` if `unmask='typed'` -->
11    @accept="onAccept"
12
13    <!-- ...see more mask props in a guide -->
14
15    <!-- other input props -->
16    placeholder='Enter number here'
17  />
18</template>
19
20<script>
21  import { IMaskComponent } from 'vue-imask';
22
23  export default {
24    data () {
25      return {
26        numberModel: '',
27        onAccept (value) {
28          console.log(value);
29        }
30      }
31    },
32    components: {
33      'imask-input': IMaskComponent
34    }
35  }
36</script>

Mask Component Example (Vue 3)

1<template>
2  <imask-input
3    <!-- possible to use 'v-model' = 'v-model:value' = 'v-model:masked' and 'v-model:unmasked' -->
4    v-model:typed="numberModel"
5    :mask="Number"
6    radix="."
7    @accept:masked="onAccept" <!-- accept value (same as '@accept:value' or just '@accept') -->
8    @accept:unmasked="onAcceptUnmasked"
9    <!--
10      @accept:typed="onAccepttyped"
11      @complete:typed="onCompleteTyped"
12    -->
13
14    <!-- ...see more mask props in a guide -->
15
16    <!-- other input props -->
17    placeholder='Enter number here'
18  />
19</template>
20
21<script>
22  import { IMaskComponent } from 'vue-imask';
23
24  export default {
25    data () {
26      return {
27        numberModel: '',
28        onAccept (value) {
29          console.log({ value });
30        },
31        onAcceptUnmasked (unmaskedValue) {
32          console.log({ unmaskedValue });
33        }
34      }
35    },
36    components: {
37      'imask-input': IMaskComponent
38    }
39  }
40</script>

Mask Directive Example

In some cases value bindings (v-model) might not work for directive, you can use @accept or @complete events to update the value.

1<template>
2  <input
3    :value="value"
4    v-imask="mask"
5    @accept="onAccept"
6    @complete="onComplete">
7</template>
8
9<script>
10  import { IMaskDirective } from 'vue-imask';
11
12  export default {
13    data () {
14      return {
15        value: '',
16        mask: {
17          mask: '{8}000000',
18          lazy: false
19        },
20      },
21    },
22    methods: {
23      onAccept (e) {
24        const maskRef = e.detail;
25        this.value = maskRef.value;
26        console.log('accept', maskRef.value);
27      },
28      onComplete (e) {
29        const maskRef = e.detail;
30        console.log('complete', maskRef.unmaskedValue);
31      },
32    },
33    directives: {
34      imask: IMaskDirective
35    }
36  }
37</script>

More options see in a guide.

Mask Composable (Vue 3)

1<template>
2  <input ref="el">
3</template>
4
5<script>
6  import { useIMask } from 'vue-imask';
7
8  export default {
9    setup (props) {
10      const { el, masked } = useIMask({
11        mask: Number,
12        radix: '.',
13      }, /* optional {
14        emit,
15        onAccept,
16        onComplete,
17        defaultValue,
18        defaultUnmaskedValue,
19        defaultTypedValue,
20      } */);
21  
22      return { el };
23    }
24  }
25</script>

No vulnerabilities found.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-imask

vue-imask-vue-2.7

6.4.3

Vue input mask

vue-imask-fork

5.2.1

Vue input mask

xxxvue-imask

1.0.1

vue 3.0 imask

@davronsherbaev/vue-imask

5.2.0

Vue input mask

vue-imask

Installations

Developer Guide

Yes

ESM

21.7.3

lerna/8.1.2/node@v21.7.3+arm64 (darwin)

Score

Pull Requests

15

192

106

71

Issues

52

748

696

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

64.26 kB

17.25 kB

Maintainers

Package Meta Information

Total Downloads

4,100,324

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Vue IMask Plugin

Install

Mask Component Example (Vue 2)

Mask Component Example (Vue 3)

Mask Directive Example

Mask Composable (Vue 3)

10

10

10

10

3

0

0

0

0

0

0

0

0

3.6

/10

Other packages similar to vue-imask