Maska Quickstart

{"id":11269,"library":"maska","title":"Maska: Input Mask","description":"Maska is a lightweight, zero-dependency JavaScript library for creating input masks, supporting Vanilla JS, Vue (2 and 3), Alpine.js, and Svelte. The current stable version is 3.2.0, with ongoing maintenance and minor releases following a significant v3.0.0 rewrite. Key differentiators include its minimal footprint (~3 Kb gzipped), comprehensive framework integrations, and advanced masking features such as custom tokens with modifiers and transform functions, hooks, and a dedicated number mask mode for simplified currency and numerical formatting. It also supports dynamic, reversed, and eager masks, providing robust solutions for various input validation scenarios.","status":"active","version":"3.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/beholdr/maska","tags":["javascript","mask","inputmask","alpinejs","svelte","vue","typescript"],"install":[{"cmd":"npm install maska","lang":"bash","label":"npm"},{"cmd":"yarn add maska","lang":"bash","label":"yarn"},{"cmd":"pnpm add maska","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For Vanilla JS and general utility. ESM-only import for modern applications. The CommonJS `require` syntax is not supported in Maska v3.","wrong":"const Maska = require('maska')","symbol":"Maska","correct":"import { Maska } from 'maska'"},{"note":"Since Maska v3, the Vue directive is imported specifically from 'maska/vue'. Ensure correct registration for Vue 2 or Vue 3 setup.","wrong":"import { Maska } from 'maska'; // Then trying to use it directly as a Vue directive without 'maska/vue'","symbol":"v-maska directive (Vue)","correct":"import { vMaska } from 'maska/vue';\n\n// In Vue component setup:\ndirectives: { maska: vMaska }"},{"note":"TypeScript type import for detailed mask information, such as `masked`, `unmasked`, `completed` status.","symbol":"MaskaDetail","correct":"import { type MaskaDetail } from 'maska'"}],"quickstart":{"code":"\n\n\n \n \n Maska Quickstart\n\n\n Phone Number (US):\n \n\n Currency ($):\n \n\n \n\n","lang":"html","description":"Demonstrates basic Maska usage for Vanilla JavaScript, applying a phone number mask and a reversed currency mask to input fields. It shows how to initialize Maska, define masks and tokens, and access masked/unmasked values and completion status."},"warnings":[{"fix":"Review the official Maska v3 documentation for updated integration instructions, especially for Vue, Alpine.js, and Svelte. Ensure you import framework-specific modules (e.g., `import { vMaska } from 'maska/vue';`).","message":"Maska v3 introduced significant breaking changes, including a simplified directive format for framework integrations and specific import paths for Vue (e.g., `maska/vue`). Direct usage of the main `maska` package for Vue directives is no longer supported.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always use `import` statements for Maska, e.g., `import { Maska } from 'maska'`. If using CommonJS, consider transpilation or a bundler that handles ESM imports.","message":"Maska v3 is designed for modern JavaScript environments and primarily uses ES Modules (ESM). Attempting to use `require()` for imports will result in errors.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Carefully define `tokens` with correct regular expressions. For instance, `tokens: { '#': { pattern: /\\d/ } }` for digits. Test edge cases with your masks.","message":"When defining custom tokens, ensure the `pattern` property uses a valid regular expression. Incorrect patterns or forgetting to escape special characters in the mask string can lead to unexpected masking behavior or input validation issues.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Include `reversed: true` in your Maska options for applicable inputs: `new Maska(input, { mask: '...', reversed: true })`.","message":"For number masks or inputs requiring reversed masking (e.g., currency inputs where you type from right to left), remember to set the `reversed: true` option to ensure correct behavior and formatting.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import { Maska } from 'maska';` in an ES Module context and that the script type is `module` in HTML ``. Alternatively, use a bundler like Webpack or Rollup to transpile your code for older environments.","cause":"Attempting to use `import` syntax in a script that is not treated as an ES Module.","error":"Uncaught SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}