Vue Input Facade (Input Masking)

2.2.0 · active · verified Sun Apr 19

vue-input-facade is a lightweight and dependency-free library for adding input masking capabilities to Vue applications. It offers a versatile approach to formatting user input through directives, components, or a programmatic API. The library prioritizes minimal overhead and efficient performance by avoiding external dependencies. The current stable version, 2.2.0, is designed for Vue 2 projects. A significant upgrade to version 3.0.0 is currently in beta, introducing full compatibility with Vue 3 and modernizing the import system to ES Module-style named imports. Development for v3 is ongoing, alongside maintenance updates for v2, indicating an active, albeit deliberate, release cadence. Its primary distinction within the Vue ecosystem is its compact size and singular focus on robust input masking without bloat.

Common errors

```
TypeError: Vue.filter is not a function
```
cause Attempting to use `Vue.filter` or the filter functionality of `vue-input-facade` in a Vue 3 project.

fix Remove `Vue.filter` registrations and adapt your masking logic to use `v-facade` directive, `<InputFacade>` component, or computed properties/methods.
```
Module not found: Can't resolve 'vue-input-facade'
```
cause Incorrect import path or attempting to import a Vue 3 compatible version into a Vue 2 project, or vice-versa.

fix Verify that your installed `vue-input-facade` version matches your Vue version (v2.x.x for Vue 2, v3.x.x for Vue 3). Ensure the package is correctly listed in `package.json`.
```
Facade is not defined (or similar reference error for vFacade, InputFacade)
```
cause Incorrect import statement for Vue 3. Prior versions used default imports, but v3 switched to named exports.

fix Update your import statements from `import Facade from 'vue-input-facade'` to specific named imports like `import { vFacade } from 'vue-input-facade'`.

Warnings

breaking Version 3.0.0-beta.1 and later require Vue 3. Projects using Vue 2 must stick to `vue-input-facade@2.x.x`.
Fix: For Vue 2 projects, ensure `"vue-input-facade": "^2.0.0"` in `package.json`. For Vue 3, update your project's Vue version to v3 and install `vue-input-facade@next`.
breaking From v3.0.0-beta.4, all imports must use ES Module-style named imports. Default imports and CommonJS `require()` syntax are no longer supported.
Fix: Replace `import Facade from 'vue-input-facade'` with `import { vFacade, InputFacade, Facade } from 'vue-input-facade'` for specific exports. Also, update any `require()` calls to `import` statements.
breaking The `Vue.filter` API, along with the filter functionality of `vue-input-facade`, has been removed in v3.0.0-beta.3 to align with Vue 3's deprecation of global filters.
Fix: Migrate any filter-based masking logic to use computed properties or methods. The directive and component approaches remain available for input masking.

Install

npm install vue-input-facade npm
yarn add vue-input-facade yarn
pnpm add vue-input-facade pnpm

Imports

vFacade
wrong:
```
import Facade from 'vue-input-facade'
```
correct:
```
import { vFacade } from 'vue-input-facade'
```
For Vue 3, the directive is exported as a named export. Register globally or locally.
InputFacade
wrong:
```
import InputFacade from 'vue-input-facade'
```
correct:
```
import { InputFacade } from 'vue-input-facade'
```
For Vue 3, the component is a named export. It's an alternative to the directive.
Facade
wrong:
```
const Facade = require('vue-input-facade')
```
correct:
```
import { Facade } from 'vue-input-facade'
```
For Vue 3, programmatic mask application is a named export. CommonJS `require` is not supported in v3.

Quickstart

This quickstart demonstrates registering and using the `v-facade` directive in a Vue 3 application to apply various input masks like phone numbers, credit card numbers, and currency formats to input fields.

import { createApp } from 'vue';
import App from './App.vue';
import { vFacade } from 'vue-input-facade';

const app = createApp(App);
app.directive('facade', vFacade);
app.mount('#app');

// App.vue
<template>
  <div>
    <h2>Input Masking Example</h2>
    <p>Phone Number (###) ###-####:</p>
    <input type="text" v-facade="'(###) ###-####'" v-model="phoneNumber" placeholder="(123) 456-7890" />
    <p>Value: {{ phoneNumber }}</p>

    <p>Credit Card Number #### #### #### ####:</p>
    <input type="text" v-facade="'#### #### #### ####'" v-model="creditCard" placeholder="0000 0000 0000 0000" />
    <p>Value: {{ creditCard }}</p>

    <p>Currency ($###,###.##):</p>
    <input type="text" v-facade="'$###,###.##'" v-model="currency" placeholder="$0.00" />
    <p>Value: {{ currency }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const phoneNumber = ref('');
    const creditCard = ref('');
    const currency = ref('');

    return {
      phoneNumber,
      creditCard,
      currency,
    };
  },
});
</script>

view raw JSON →