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="'♦'" />