Vue jQuery Mask Component

Vue.js component for jQuery Mask Plugin

Demo on JSFiddle

Version matrix

Requirements

• jQuery >=1.7.0
• Vue 3.x

Installation

# Yarn
yarn add vue-jquery-mask

# npm
npm install vue-jquery-mask

Using Webpack?

• Webpack users need to configure ProvidePlugin

  // webpack.config.js
  plugins: [
    new webpack.ProvidePlugin({     
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      $: 'jquery',     
    }),
  ]  

Usage Example

<template>
  <div>
    <vue-mask 
        class="form-control" 
        v-model="date"  
        mask="00/00/0000" 
        :raw="false"
        :options="options"> 
    </vue-mask>
  </div>
</template>

<script>
  // Import this component
  import vueMask from 'vue-jquery-mask';

  export default {    
    data () {
      return {
        date: null,
        options: {
          placeholder: '__/__/____',
          // http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
        }       
      }
    },
    components: {
      vueMask
    }
  }
</script>

As plugin

  import {createApp} from 'vue';
  import VueMask from 'vue-jquery-mask';
  const app = createApp().mount('#app')   
  app.use(VueMask);

This will register a global component <vue-mask>

Available props

The component accepts these props:

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-jquery-mask@2"></script>
<!-- Register global component -->
<script>
// Your app init login may go here
app.use(VuejQueryMask)
</script>

Run examples on your localhost

• Clone this repo
• You should have node-js >=10.13 and yarn >=1.x pre-installed
• Install dependencies - yarn install
• Run webpack dev server - yarn start
• This should open the demo page at http://localhost:9000 in your default web browser

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

Changelog

2.0.0

• Add support for Vue v3.x
• For Vue v2.x use v1.x

1.0.3

• Fix: issue #5

1.0.2

• Fix: issue #1
• Add: blur event

1.0.1

• Fix: mask prop validation
• Fix: onChange callback arguments

1.0.0

• Initial release