Registry / web-framework / vue-input-facade

vue-input-facade

library2.2.0jsnpmunverified

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.

web-framework

npm install vue-input-facade

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-INPUT-FACADE

vue-input-facade

web-frameworkjavascriptv2.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vFacade

✓ import { vFacade } from 'vue-input-facade'

✗ import Facade from 'vue-input-facade'

For Vue 3, the directive is exported as a named export. Register globally or locally.

InputFacade

✓ import { InputFacade } from 'vue-input-facade'

✗ import InputFacade from 'vue-input-facade'

For Vue 3, the component is a named export. It's an alternative to the directive.

Facade

✓ import { Facade } from 'vue-input-facade'

✗ const Facade = require('vue-input-facade')

For Vue 3, programmatic mask application is a named export. CommonJS `require` is not supported in v3.

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>

Debug

Known issues

breakingVersion 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`.

affects: >=3.0.0-beta.1

breakingFrom 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.

affects: >=3.0.0-beta.4

breakingThe `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.

affects: >=3.0.0-beta.3

Errors

Common errors & fixes

TypeError: Vue.filter is not a function

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'

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)

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'`.

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/RonaldJerez/vue-input-facade ↗

packagehttps://www.npmjs.com/package/vue-input-facade ↗

homepagehttps://ronaldjerez.github.io/vue-input-facade ↗