vuetify-mask-with-slots

vuetify-mask-with-slots

Mask and input helpers for Vuetify 2 v-text-field, with slot inheritance working correctly.

Forked from juareznasato/vuetify-mask (created by Juarez Nasato) and merged with vue-the-mask for custom masks. This fork exists to fix slot inheritance on Vuetify 2 wrappers — full credit to the original author for the masking foundation.

Links

Requires Vue 2 + Vuetify 2. Not compatible with Vue 3 / Vuetify 3.

The live demo picks EN or PT from the browser language (with a manual toggle), and remembers your choice.

Why this fork

The original vuetify-mask@1.1.2 (still latest on npm) wraps v-text-field without forwarding slots — so append, prepend, and similar content never render. Public report: issue #33. This package keeps the masking features and fixes slot inheritance.

Install

npm i vuetify-mask-with-slots

Peer dependencies (install in your app):

npm i vue@^2 vuetify@^2
# required for date/time components:
npm i moment
# icons used by date pickers:
npm i -D @mdi/font

Register

import Vue from "vue";
import VuetifyMask from "vuetify-mask-with-slots";

Vue.use(VuetifyMask);

This registers:

Money and Percent both use the same Decimal component. Configure with options / properties (prefix R$, suffix %, precision, etc.).

Common props

Most components accept:

properties

Any v-text-field prop. Prefer camelCase:

:properties="{
  outlined: true,
  clearable: true,
  prefix: 'R$',
  backgroundColor: 'red'
}"

Kebab-case keys also work: 'single-line': true.

Slots & events

Components that wrap v-text-field forward slots and most listeners (click, focus, etc.). Use the same slot names as Vuetify 2 (append, prepend, label, …).

Components

Money / Percent

v-text-field-money and v-text-field-percent share the same implementation.

Props

<template>
  <v-text-field-money
    v-model="value"
    :properties="{
      label: 'Money',
      prefix: 'R$',
      outlined: true,
      clearable: true
    }"
    :options="{
      locale: 'pt-BR',
      length: 11,
      precision: 2
    }"
    value-when-is-empty=""
  />
</template>

<script>
export default {
  data: () => ({
    value: "123456789.00" // number or string; empty: "" or null
  })
};
</script>

<v-text-field-percent
  v-model="value"
  :properties="{ label: 'Percent', suffix: '%', clearable: true }"
  :options="{ locale: 'pt-BR', length: 5, precision: 2 }"
/>

Integer

<v-text-field-integer
  v-model="value"
  label="Integer"
  :properties="{ outlined: true, clearable: true }"
  :options="{
    inputMask: '#########',
    outputMask: '#########',
    empty: null,
    applyAfter: false
  }"
/>

DateTimePicker (milliseconds)

v-model is a Unix timestamp in ms (number or numeric string, e.g. 1558220700000 or "1558220700000").

<v-text-field-datetimepicker
  v-model="value"
  label="Date & time"
  :time="true"
  :properties="{
    outlined: true,
    clearable: true,
    appendIcon: 'mdi-av-timer'
  }"
  :options="{
    inputMask: 'DD/MM/YYYY HH:mm',
    locale: 'pt-BR',
    tabDateTitle: 'Date',
    tabTimeTitle: 'Time',
    closeOnDateClick: false,
    useSeconds: false
  }"
/>

Requires moment and @mdi/font (or another MDI setup) in the host app.

DateTimeStringPicker (formatted string)

Same UI as above, but v-model is a string matching options.inputMask.

<v-text-field-datetimestringpicker
  v-model="value"
  label="Date"
  :properties="{ outlined: true }"
  :options="{
    inputMask: 'YYYY-MM-DD',
    locale: 'pt-BR',
    tabDateTitle: 'Date',
    tabTimeTitle: 'Time'
  }"
/>

data: () => ({ value: "2024-05-16" })

SimpleMask (credit card, phone, custom)

Based on vue-the-mask. Uses $attrs (not properties).

<!-- Credit card -->
<v-text-field-simplemask
  v-model="card"
  label="Credit card"
  mask="#### #### #### ####"
/>

<!-- Phone (BR) -->
<v-text-field-simplemask
  v-model="phone"
  label="Phone"
  mask="(##) #####-####"
/>

<!-- Keep mask characters in v-model -->
<v-text-field-simplemask
  v-model="code"
  label="Code"
  mask="XX-XXXX-XXXX-XXX"
  masked
/>

Default tokens

{
  '#': { pattern: /\d/ },
  'X': { pattern: /[0-9a-zA-Z]/ },
  'S': { pattern: /[a-zA-Z]/ },
  'A': { pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase() },
  'a': { pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase() },
  '!': { escape: true }
}

Custom tokens example:

<v-text-field-simplemask mask="FFFFFF" :tokens="hexTokens" />

hexTokens: {
  F: {
    pattern: /[0-9a-fA-F]/,
    transform: v => v.toLocaleUpperCase()
  }
}

CPF / CNPJ / CEP

<v-text-field-cpf
  v-model="cpf"
  label="CPF"
  :properties="{ outlined: true, clearable: true }"
  :options="{
    outputMask: '###########',
    empty: null,
    applyAfter: true
  }"
/>

<v-text-field-cnpj
  v-model="cnpj"
  label="CNPJ"
  :properties="{ outlined: true, clearable: true }"
  :options="{
    outputMask: '##############',
    empty: null,
    applyAfter: true
  }"
/>

<v-text-field-cep
  v-model="cep"
  label="CEP"
  :properties="{ outlined: true, clearable: true }"
  :options="{
    outputMask: '########',
    empty: null,
    applyAfter: true
  }"
/>

With applyAfter: true, CPF/CNPJ validate check digits when the mask is complete. Invalid values are cleared.

DotNumber

Accepts digits and . only.

<v-text-field-dotnumber
  v-model="value"
  label="Version / dotted number"
  :properties="{ clearable: true }"
  :options="{ length: 20, empty: null, applyAfter: false }"
/>

FileBase64

Picks a file and stores a Base64 data URL in v-model. Emits fileName with the original file name.

<v-text-field-filebase64
  v-model="value"
  label="Select image"
  :properties="{
    outlined: true,
    appendIcon: 'mdi-message-image-outline'
  }"
  :options="{ acceptFile: 'image/*' }"
  @fileName="fileName = $event"
/>

acceptFile examples: image/*, application/pdf, image/jpeg,image/png,application/pdf.

Local development

npm install
npm run serve   # demo on http://localhost:8081
npm run build   # build demo
npm run lint

Live demo (GitHub Pages): https://gabrielhrp31.github.io/vuetify-mask/

Maintainer

Gabriel Rodrigues
LinkedIn: linkedin.com/in/gabrielhrp31 · Site: gabrielhrp.com · GitHub: gabrielhrp31

Original package by Juarez Nasato.

Changelog

2.4.9

• Fix paste (Ctrl+V) wiping v-model to null/empty on CPF, CNPJ, CEP, Integer, and DotNumber (especially with applyAfter / empty: null)
• Always preventDefault on paste and read text/plain from the clipboard
• Keep partial values while the mask is incomplete; keep previous value on invalid CPF/CNPJ instead of clearing
• Docs: highlight live demo, LinkedIn, and maintainer links

2.4.8

• Documentation rewrite aligned with the real API (components, peers, options, examples)
• Clearer package description on npm
• Demo with EN/PT i18n (browser language first, manual toggle); origin story and credits on the demo site

2.4.7

• Migrate demo tooling from Vue CLI 4 to Vite (fixes most npm audit issues in the repo)
• Production dependencies audit clean (npm audit --omit=dev)
• Declare vue, vuetify, and moment as peer dependencies; remove unused v-money
• Publish only library files (no demo / trash)
• Fix CPF validation crash (ReferenceError on rev)
• Fix DateTimePicker so numeric string timestamps work and no longer wipe v-model on format failure
• Safer $listeners handling on Integer / CPF / CNPJ / CEP / DotNumber

2.4.6

• Previous stable release on npm

License

MIT