Vue jQuery Mask Component

Vue.js component for jQuery Mask Plugin.

Version matrix

Vue.js version Package version Branch
2.x 1.x 1.x
3.x 2.x master


  • jQuery >=1.7.0
  • Vue 3.x


# Yarn
yarn add vue-jquery-mask

# npm
npm install vue-jquery-mask

Using Webpack?

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

Usage Example


  // Import this component
  import vueMask from 'vue-jquery-mask';
  export default {    
    data () {
      return {
        date: null,
        options: {
          placeholder: '__/__/____',
    components: {

As plugin

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

This will register a global component <vue-mask>

Available props

The component accepts these props:

Attribute Type Default Required? Description
v-model String / null null true Set or Get input value
mask String / Function true Masking pattern
options Object {} false Configuration options
raw Boolean true false When set to false; emits formatted value with format pattern and delimiters

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src=""></script>
<!-- Lastly add this package -->
<script src=""></script>
<!-- Register global component -->
// Your app init logic may go here

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