Vue Bootstrap Input Mask MDB Pro component

Vue Input Mask - Bootstrap 4 & Material Design

The mdb-input-mask is a custom directive which allows to set a predefined format of forms.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'

        
            
      <script>
        import {
          mdbInputMask
        } from "mdbvue";
      </script>

Step 2: Add mdbInputMask to the directives object 

        
            
      <script>
        import {
          mdbInputMask
        } from "mdbvue";
        export default {
          directives: {
            mdbInputMask
          }
        };
      </script>

Step 3: Attach the directive to input or input's wrapper for setting a predefined format. 

        
            
      <template>
        <mdb-input v-mdb-input-mask="'♠♠♠♠♠♠♠♠♠♠'" v-model="value" placeholder="♠♠♠♠♠♠♠♠♠♠" />
      </template>
      
        
    
        
            
      <script>
        import {
          mdbInput,
          mdbInputMask
        } from "mdbvue";
        export default {
          data() {
            return {
              value: ''
            }
          },
          components: {
            mdbInput
          },
          directives: {
            mdbInputMask
          }
        };
      </script>

Options

Name Type Description Example
♠ String Allows only numbers <input v-mdb-input-mask="'♠'" />
♣ String Allows only letters <input v-mdb-input-mask="'♣'" />
♥ String Allows only numbers and letters <input v-mdb-input-mask="'♥'" />
♦ String Allows any digit <input v-mdb-input-mask="'♦'" />