Imask-Vuetify

A simple component that integrates Vuetify TextField component with Imask. Available in pug and html templates.

Motivation

This component contains few simple rules that have solved some common side effects when Imask is integrated with native inputs inside Vuetify TextField. This side effects are common even while using vue-imask.

Dependencies

• Vuetify
• Imask

Usage

HTML Template

<template>
  <imask-field label="Name" v-model="name" :mask="nameMask" required>
</template>

<script>
  export default {
    data: () => ({
      name: 'My Name',

      nameMask: {
        mask: /^([a-zA-Z]+ ?)*$/
      }
    })
  }
</script>

Pug Template

<template lang="pug">
  imask-field(
    label="Name"
    v-model="name"
    :mask="nameMask"
    required
  )
</template>

<script>
  export default {
    data: () => ({
      name: 'My Name',

      nameMask: {
        mask: /^([a-zA-Z]+ ?)*$/
      }
    })
  }
</script>