maska/docs/v3/install.md

Installation

With bundler

npm install maska

Vanilla JS

And then import it in your code:

import { Mask, MaskInput } from 'maska'

new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use

Alpine

And then register it as custom plugin:

import Alpine from 'alpinejs'
import { xMaska } from 'maska/alpine'

Alpine.plugin(xMaska)

Svelte

And then use it in your .svelte component:

<script>
  import { maska } from 'maska/svelte'
</script>

<input use:maska data-maska="#-#" />

Vue

And then use it in your .vue component:

<script setup>
  import { vMaska } from 'maska/vue'
</script>

<template>
  <input v-maska data-maska="#-#" />
</template>

From CDN

Vanilla JS

You can use Maska directly from CDN with a simple script tag as UMD-build. Library API will be exposed on the global Maska object:

<script src="https://cdn.jsdelivr.net/npm/maska@3.0.0-beta1/dist/cdn/maska.js"></script>
<script>
  const { Mask, MaskInput } = Maska

  new MaskInput("[data-maska]") // for masked input
  const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>

Alpine

Include Maska from CDN, just make sure to include it before Alpine's core JS file:

<!-- Maska Plugin -->
<script src="https://cdn.jsdelivr.net/npm/maska@3.0.0-beta1/dist/cdn/alpine.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

This will automatically register Maska plugin inside Alpine.

Vue

You can use Maska directly from CDN and register directive:

<script src="https://cdn.jsdelivr.net/npm/maska@3.0.0-beta1/dist/cdn/vue.js"></script>
<script>
  const { vMaska } = Maska

  Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>

With importmap

For modern browsers you can use ES modules build with (optional) import maps:

Vanilla JS

<script type="importmap">
  {
    "imports": {
      "maska": "https://cdn.jsdelivr.net/npm/maska@3.0.0-beta1/dist/maska.mjs"
    }
  }
</script>
<script type="module">
  import { Mask, MaskInput } from 'maska'

  new MaskInput("[data-maska]") // for masked input
  const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>

Alpine

<script type="importmap">
  {
    "imports": {
      "maska/alpine": "https://cdn.jsdelivr.net/npm/maska@3.0.0-beta1/dist/alpine.mjs"
    }
  }
</script>
<script type="module">
  import Alpine from 'alpinejs'
  import { xMaska } from 'maska/alpine'

  Alpine.plugin(xMaska)
</script>

Vue

<script type="importmap">
  {
    "imports": {
      "maska/vue": "https://cdn.jsdelivr.net/npm/maska@3.0.0-beta1/dist/vue.mjs"
    }
  }
</script>
<script type="module">
  import { vMaska } from 'maska/vue'

  Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>

?> Notice that we are using <script type="module"> in this case.