{"id":12508,"library":"vue-input-facade","title":"Vue Input Facade (Input Masking)","description":"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/RonaldJerez/vue-input-facade","tags":["javascript","vue","vuejs","input","facade","mask","masking","component","directive"],"install":[{"cmd":"npm install vue-input-facade","lang":"bash","label":"npm"},{"cmd":"yarn add vue-input-facade","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-input-facade","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For Vue 3, the directive is exported as a named export. Register globally or locally.","wrong":"import Facade from 'vue-input-facade'","symbol":"vFacade","correct":"import { vFacade } from 'vue-input-facade'"},{"note":"For Vue 3, the component is a named export. It's an alternative to the directive.","wrong":"import InputFacade from 'vue-input-facade'","symbol":"InputFacade","correct":"import { InputFacade } from 'vue-input-facade'"},{"note":"For Vue 3, programmatic mask application is a named export. CommonJS `require` is not supported in v3.","wrong":"const Facade = require('vue-input-facade')","symbol":"Facade","correct":"import { Facade } from 'vue-input-facade'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport { vFacade } from 'vue-input-facade';\n\nconst app = createApp(App);\napp.directive('facade', vFacade);\napp.mount('#app');\n\n// App.vue\n<template>\n  <div>\n    <h2>Input Masking Example</h2>\n    <p>Phone Number (###) ###-####:</p>\n    <input type=\"text\" v-facade=\"'(###) ###-####'\" v-model=\"phoneNumber\" placeholder=\"(123) 456-7890\" />\n    <p>Value: {{ phoneNumber }}</p>\n\n    <p>Credit Card Number #### #### #### ####:</p>\n    <input type=\"text\" v-facade=\"'#### #### #### ####'\" v-model=\"creditCard\" placeholder=\"0000 0000 0000 0000\" />\n    <p>Value: {{ creditCard }}</p>\n\n    <p>Currency ($###,###.##):</p>\n    <input type=\"text\" v-facade=\"'$###,###.##'\" v-model=\"currency\" placeholder=\"$0.00\" />\n    <p>Value: {{ currency }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  name: 'App',\n  setup() {\n    const phoneNumber = ref('');\n    const creditCard = ref('');\n    const currency = ref('');\n\n    return {\n      phoneNumber,\n      creditCard,\n      currency,\n    };\n  },\n});\n</script>","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"Version 3.0.0-beta.1 and later require Vue 3. Projects using Vue 2 must stick to `vue-input-facade@2.x.x`.","severity":"breaking","affected_versions":">=3.0.0-beta.1"},{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0-beta.4"},{"fix":"Migrate any filter-based masking logic to use computed properties or methods. The directive and component approaches remain available for input masking.","message":"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.","severity":"breaking","affected_versions":">=3.0.0-beta.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Remove `Vue.filter` registrations and adapt your masking logic to use `v-facade` directive, `<InputFacade>` component, or computed properties/methods.","cause":"Attempting to use `Vue.filter` or the filter functionality of `vue-input-facade` in a Vue 3 project.","error":"TypeError: Vue.filter is not a function"},{"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`.","cause":"Incorrect import path or attempting to import a Vue 3 compatible version into a Vue 2 project, or vice-versa.","error":"Module not found: Can't resolve 'vue-input-facade'"},{"fix":"Update your import statements from `import Facade from 'vue-input-facade'` to specific named imports like `import { vFacade } from 'vue-input-facade'`.","cause":"Incorrect import statement for Vue 3. Prior versions used default imports, but v3 switched to named exports.","error":"Facade is not defined (or similar reference error for vFacade, InputFacade)"}],"ecosystem":"npm"}