diff --git a/src/components/inputmask/InputMask.vue b/src/components/inputmask/InputMask.vue
new file mode 100644
index 000000000..15c1044a2
--- /dev/null
+++ b/src/components/inputmask/InputMask.vue
@@ -0,0 +1,490 @@
+<template>
+    <input ref="input" :class="inputClass" v-on="listeners" :value="value" />
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        value: null,
+        slotChar: {
+            type: String,
+            default: '_'
+        },
+        mask: {
+            type: String,
+            default: null
+        },
+        autoClear: {
+            type: Boolean,
+            default: true
+        },
+        unmask: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        caret(first, last) {
+            let range, begin, end;
+
+            if (!this.$refs.input.offsetParent || this.$refs.input !== document.activeElement) {
+                return;
+            }
+
+            if (typeof first === 'number') {
+                begin = first;
+                end = (typeof last === 'number') ? last : begin;
+                if (this.$refs.input.setSelectionRange) {
+                    this.$refs.input.setSelectionRange(begin, end);
+                }
+                else if (this.$refs.input['createTextRange']) {
+                    range = this.$refs.input['createTextRange']();
+                    range.collapse(true);
+                    range.moveEnd('character', end);
+                    range.moveStart('character', begin);
+                    range.select();
+                }
+            }
+            else {
+                if (this.$refs.input.setSelectionRange) {
+                    begin = this.$refs.input.selectionStart;
+                    end = this.$refs.input.selectionEnd;
+                }
+                else if (document['selection'] && document['selection'].createRange) {
+                    range = document['selection'].createRange();
+                    begin = 0 - range.duplicate().moveStart('character', -100000);
+                    end = begin + range.text.length;
+                }
+
+                return { begin: begin, end: end };
+            }
+        },
+        isCompleted() {
+            for (let i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
+                if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
+                    return false;
+                }
+            }
+
+            return true;
+        },
+        getPlaceholder(i) {
+            if (i < this.slotChar.length) {
+                return this.slotChar.charAt(i);
+            }
+            return this.slotChar.charAt(0);
+        },
+        seekNext(pos) {
+            while (++pos < this.len && !this.tests[pos]);
+            return pos;
+        },
+        seekPrev(pos) {
+            while (--pos >= 0 && !this.tests[pos]);
+            return pos;
+        },
+        shiftL(begin, end) {
+            let i, j;
+
+            if (begin < 0) {
+                return;
+            }
+
+            for (i = begin, j = this.seekNext(end); i < this.len; i++) {
+                if (this.tests[i]) {
+                    if (j < this.len && this.tests[i].test(this.buffer[j])) {
+                        this.buffer[i] = this.buffer[j];
+                        this.buffer[j] = this.getPlaceholder(j);
+                    } else {
+                        break;
+                    }
+
+                    j = this.seekNext(j);
+                }
+            }
+            this.writeBuffer();
+            this.caret(Math.max(this.firstNonMaskPos, begin));
+        },
+        shiftR(pos) {
+            let i, c, j, t;
+
+            for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
+                if (this.tests[i]) {
+                    j = this.seekNext(i);
+                    t = this.buffer[i];
+                    this.buffer[i] = c;
+                    if (j < this.len && this.tests[j].test(t)) {
+                        c = t;
+                    } else {
+                        break;
+                    }
+                }
+            }
+        },
+        handleAndroidInput(event) {
+            var curVal = this.$refs.input.value;
+            var pos = this.caret();
+            if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
+                // a deletion or backspace happened
+                this.checkVal(true);
+                while (pos.begin > 0 && !this.tests[pos.begin - 1])
+                    pos.begin--;
+                if (pos.begin === 0) {
+                    while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
+                        pos.begin++;
+                }
+                this.caret(pos.begin, pos.begin);
+            } else {
+                this.checkVal(true);
+                while (pos.begin < this.len && !this.tests[pos.begin])
+                    pos.begin++;
+
+                this.caret(pos.begin, pos.begin);
+            }
+
+            if (this.isCompleted()) {
+                this.$emit('complete', event);
+            }
+        },
+        clearBuffer(start, end) {
+            let i;
+            for (i = start; i < end && i < this.len; i++) {
+                if (this.tests[i]) {
+                    this.buffer[i] = this.getPlaceholder(i);
+                }
+            }
+        },
+        writeBuffer() {
+            this.$refs.input.value = this.buffer.join('');
+        },
+        checkVal(allow) {
+            this.isValueChecked = true;
+            //try to place characters where they belong
+            let test = this.$refs.input.value,
+                lastMatch = -1,
+                i,
+                c,
+                pos;
+
+            for (i = 0, pos = 0; i < this.len; i++) {
+                if (this.tests[i]) {
+                    this.buffer[i] = this.getPlaceholder(i);
+                    while (pos++ < test.length) {
+                        c = test.charAt(pos - 1);
+                        if (this.tests[i].test(c)) {
+                            this.buffer[i] = c;
+                            lastMatch = i;
+                            break;
+                        }
+                    }
+                    if (pos > test.length) {
+                        this.clearBuffer(i + 1, this.len);
+                        break;
+                    }
+                } else {
+                    if (this.buffer[i] === test.charAt(pos)) {
+                        pos++;
+                    }
+                    if (i < this.partialPosition) {
+                        lastMatch = i;
+                    }
+                }
+            }
+            if (allow) {
+                this.writeBuffer();
+            } else if (lastMatch + 1 < this.partialPosition) {
+                if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
+                    // Invalid value. Remove it and replace it with the
+                    // mask, which is the default behavior.
+                    if (this.$refs.input.value) this.$refs.input.value = '';
+                    this.clearBuffer(0, this.len);
+                } else {
+                    // Invalid value, but we opt to show the value to the
+                    // user and allow them to correct their mistake.
+                    this.writeBuffer();
+                }
+            } else {
+                this.writeBuffer();
+                this.$refs.input.value = this.$refs.input.value.substring(0, lastMatch + 1);
+            }
+            return (this.partialPosition ? i : this.firstNonMaskPos);
+        },
+        handleInputChange(event) {
+            if (this.$attrs.readonly) {
+                return;
+            }
+
+            var pos = this.checkVal(true);
+            this.caret(pos);
+            this.updateModel(event);
+            
+            if (this.isCompleted()) {
+                this.$emit('complete', event);
+            }
+        },
+        getUnmaskedValue() {
+            let unmaskedBuffer = [];
+            for (let i = 0; i < this.buffer.length; i++) {
+                let c = this.buffer[i];
+                if (this.tests[i] && c !== this.getPlaceholder(i)) {
+                    unmaskedBuffer.push(c);
+                }
+            }
+
+            return unmaskedBuffer.join('');
+        },
+        updateModel(e) {
+            let val = this.unmask ? this.getUnmaskedValue() : e.target.value;
+            this.$emit('input', (this.defaultBuffer !== val) ? val : '');
+        },
+        updateValue() {
+            if (this.$refs.input) {
+                if (this.value == null) {
+                    this.$refs.input.value = '';
+                }
+                else {
+                    this.$refs.input.value = this.value;
+                    this.checkVal();
+                }
+
+                setTimeout(() => {
+                    if(this.$refs.input) {
+                        this.writeBuffer();
+                        this.checkVal();
+
+                        let val = this.unmask ? this.getUnmaskedValue() : this.$refs.input.value;
+                        this.$emit('input', (this.defaultBuffer !== val) ? val : '');
+                    }
+                }, 10);
+
+                this.focusText = this.$refs.input.value;
+            }
+        }
+    },
+    mounted() {
+        this.tests = [];
+        this.partialPosition = this.mask.length;
+        this.len = this.mask.length;
+        this.firstNonMaskPos = null;
+        this.defs = {
+            '9': '[0-9]',
+            'a': '[A-Za-z]',
+            '*': '[A-Za-z0-9]'
+        };
+
+        let ua = DomHandler.getUserAgent();
+        this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
+
+        let maskTokens = this.mask.split('');
+        for (let i = 0; i < maskTokens.length; i++) {
+            let c = maskTokens[i];
+            if (c === '?') {
+                this.len--;
+                this.partialPosition = i;
+            }
+            else if (this.defs[c]) {
+                this.tests.push(new RegExp(this.defs[c]));
+                if (this.firstNonMaskPos === null) {
+                    this.firstNonMaskPos = this.tests.length - 1;
+                }
+                if (i < this.partialPosition) {
+                    this.lastRequiredNonMaskPos = this.tests.length - 1;
+                }
+            }
+            else {
+                this.tests.push(null);
+            }
+        }
+
+        this.buffer = [];
+        for (let i = 0; i < maskTokens.length; i++) {
+            let c = maskTokens[i];
+            if (c !== '?') {
+                if (this.defs[c])
+                    this.buffer.push(this.getPlaceholder(i));
+                else
+                    this.buffer.push(c);
+            }
+        }
+        this.defaultBuffer = this.buffer.join('');
+        this.updateValue();
+    },
+    watch: {
+        value(newValue, oldValue) {
+            if (oldValue && oldValue !== newValue && this.$refs.input.value !== newValue) {
+                this.updateValue();
+            }
+        }
+    },
+    computed: {
+        listeners() {
+            let $vm = this;
+
+            return {
+                ...$vm.$listeners,
+                input: event => {
+                    if ($vm.androidChrome)
+                        $vm.handleAndroidInput(event);
+                    else
+                        $vm.handleInputChange(event);
+
+                    $vm.$emit('input', event.target.value);
+                },
+                focus: event => {
+                    if ($vm.$attrs.readonly) {
+                        return;
+                    }
+
+                    $vm.focus = true;
+
+                    clearTimeout($vm.caretTimeoutId);
+                    let pos;
+
+                    $vm.focusText = $vm.$refs.input.value;
+
+                    pos = $vm.checkVal();
+
+                    $vm.caretTimeoutId = setTimeout(() => {
+                        if ($vm.$refs.input !== document.activeElement) {
+                            return;
+                        }
+                        $vm.writeBuffer();
+                        if (pos === $vm.mask.replace("?", "").length) {
+                            $vm.caret(0, pos);
+                        } else {
+                            $vm.caret(pos);
+                        }
+                    }, 10);
+
+                    $vm.$emit('focus', event)
+                },
+                blur: event => {
+					$vm.focus = false;
+                    $vm.checkVal();
+                    $vm.updateModel(event);
+
+                    if ($vm.$refs.input.value !== $vm.focusText) {
+                        let e = document.createEvent('HTMLEvents');
+                        e.initEvent('change', true, false);
+                        $vm.$refs.input.dispatchEvent(e);
+                    }
+
+                    $vm.$emit('blur', event);
+                },
+                keydown: event => {
+                    if ($vm.$attrs.readonly) {
+                        return;
+                    }
+                    
+                    let k = event.which || event.keyCode,
+                        pos,
+                        begin,
+                        end;
+                    let iPhone = /iphone/i.test(DomHandler.getUserAgent());
+                    $vm.oldVal = $vm.$refs.input.value;
+
+                    //backspace, delete, and escape get special treatment
+                    if (k === 8 || k === 46 || (iPhone && k === 127)) {
+                        pos = $vm.caret();
+                        begin = pos.begin;
+                        end = pos.end;
+
+
+                        if (end - begin === 0) {
+                            begin = k !== 46 ? $vm.seekPrev(begin) : (end = $vm.seekNext(begin - 1));
+                            end = k === 46 ? $vm.seekNext(end) : end;
+                        }
+
+                        $vm.clearBuffer(begin, end);
+                        $vm.shiftL(begin, end - 1);
+                        $vm.updateModel(event);
+
+                        event.preventDefault();
+                    } else if (k === 13) { // enter
+                        $vm.onBlur(event);
+                        $vm.updateModel(event);
+                    } else if (k === 27) { // escape
+                        $vm.$refs.input.value = $vm.focusText;
+                        $vm.caret(0, $vm.checkVal());
+                        $vm.updateModel(event);
+                        event.preventDefault();
+                    }
+
+                    $vm.$emit('keydown', event);
+                },
+                keypress: event => {
+                    if ($vm.$attrs.readonly) {
+                        return;
+                    }
+
+                    var k = event.which || event.keyCode,
+                        pos = $vm.caret(),
+                        p,
+                        c,
+                        next,
+                        completed;
+
+                    if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {//Ignore
+                        return;
+                    } else if (k && k !== 13) {
+                        if (pos.end - pos.begin !== 0) {
+                            $vm.clearBuffer(pos.begin, pos.end);
+                            $vm.shiftL(pos.begin, pos.end - 1);
+                        }
+
+                        p = $vm.seekNext(pos.begin - 1);
+                        if (p < $vm.len) {
+                            c = String.fromCharCode(k);
+                            if ($vm.tests[p].test(c)) {
+                                $vm.shiftR(p);
+
+                                $vm.buffer[p] = c;
+                                $vm.writeBuffer();
+                                next = $vm.seekNext(p);
+
+                                if (/android/i.test(DomHandler.getUserAgent())) {
+                                    //Path for CSP Violation on FireFox OS 1.1
+                                    let proxy = () => {
+                                        $vm.caret(next);
+                                    };
+
+                                    setTimeout(proxy, 0);
+                                } else {
+                                    $vm.caret(next);
+                                }
+                                if (pos.begin <= $vm.lastRequiredNonMaskPos) {
+                                    completed = $vm.isCompleted();
+                                }
+                            }
+                        }
+                        event.preventDefault();
+                    }
+
+                    $vm.updateModel(event);
+
+                    if (completed) {
+                        $vm.$emit('complete', event);
+                    }
+                    
+                    $vm.$emit('keypress', event);
+                },
+                paste: event => {
+                    $vm.handleInputChange(event);
+
+                    $vm.$emit('paste', event);
+                }
+            };
+        },
+        filled() {
+            return (this.value != null && this.value.toString().length > 0)
+        },
+        inputClass() {
+            return ['p-inputmask p-inputtext p-component', {
+                'p-filled': this.filled,
+                'p-disabled': this.$attrs.disabled
+            }];
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/inputmask/InputMaskDemo.vue b/src/views/inputmask/InputMaskDemo.vue
new file mode 100644
index 000000000..f636c25cd
--- /dev/null
+++ b/src/views/inputmask/InputMaskDemo.vue
@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>InputMask</h1>
+                <p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <h3>Basic {{val1}}</h3>
+                    <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <h3>SSN {{val2}}</h3>
+                    <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <h3>Date {{val3}}</h3>
+                    <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <h3>Phone {{val4}}</h3>
+                    <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <h3>Phone Ext {{val5}}</h3>
+                    <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <h3>Serial Number {{val6}}</h3>
+                    <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
+                </div>
+            </div>
+        </div>
+
+        <InputMaskDoc />
+    </div>
+</template>
+
+<script>
+import InputMaskDoc from './InputMaskDoc';
+
+export default {
+    data() {
+        return {
+            val1: null,
+            val2: null,
+            val3: null,
+            val4: null,
+            val5: null,
+            val6: null
+        }
+    },
+	components: {
+		'InputMaskDoc': InputMaskDoc
+	}
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
new file mode 100644
index 000000000..ae0441161
--- /dev/null
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -0,0 +1,169 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import InputMask from 'primevue/inputmask';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>A model can be bound using the standard v-model directive.</p>
+<CodeHighlight>
+&lt;InputMask v-model="value" mask="99-999999" /&gt;
+</CodeHighlight>
+
+				<h3>Mask</h3>
+                <p>Mask format can be a combination of the the following built-in definitions.</p>
+                
+                <ul>
+                    <li>
+                        a - Alpha character (A-Z,a-z)
+                    </li>
+                    <li>
+                        9 - Numeric character (0-9)
+                    </li>
+                    <li>
+                        * - Alpha numberic character (A-Z,a-z,0-9)
+                    </li>
+                </ul>
+<CodeHighlight>
+&lt;InputMask v-model="value" mask="a*-999-a999" /&gt;
+</CodeHighlight>
+
+                <h3>SlotChar</h3>
+                <p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
+<CodeHighlight>
+&lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
+</CodeHighlight>
+                <h3>Optional Values</h3>
+                <p>If the input does not complete the mask definition, it is cleared by default.
+                    Use <i>autoClear</i> property to control this behavior. In addition, certain part of
+                    a mask can be made optional by using ? symbol where anything after the question
+                    mark becomes optional.</p>
+<CodeHighlight>
+&lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+				<p>InputText passes any valid attribute to the underlying input element. In addition;</p>
+                <div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>mask</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Mask pattern.</td>
+                            </tr>
+                            <tr>
+                                <td>slotChar</td>
+                                <td>string</td>
+                                <td>-</td>
+                                <td>Placeholder character in mask, default is underscore.</td>
+                            </tr>
+                            <tr>
+                                <td>autoClear</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Clears the incomplete value on blur.</td>
+                            </tr>
+                            <tr>
+                                <td>unmask</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-inputmask p-inputtext</td>
+                                <td>Input element</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="p-grid p-fluid"&gt;
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;h3&gt;Basic {{val1}}&lt;/h3&gt;
+        &lt;InputMask mask="99-999999" v-model="val1" placeholder="99-999999" /&gt;
+    &lt;/div&gt;
+
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;h3&gt;SSN {{val2}}&lt;/h3&gt;
+        &lt;InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" /&gt;
+    &lt;/div&gt;
+
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;h3&gt;Date {{val3}}&lt;/h3&gt;
+        &lt;InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
+    &lt;/div&gt;
+
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;h3&gt;Phone {{val4}}&lt;/h3&gt;
+        &lt;InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" /&gt;
+    &lt;/div&gt;
+
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;h3&gt;Phone Ext {{val5}}&lt;/h3&gt;
+        &lt;InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/&gt;
+    &lt;/div&gt;
+
+    &lt;div class="p-col-12 p-md-4"&gt;
+        &lt;h3&gt;Serial Number {{val6}}&lt;/h3&gt;
+        &lt;InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" /&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            val1: null,
+            val2: null,
+            val3: null,
+            val4: null,
+            val5: null,
+            val6: null
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file