/

Vue

Source code

On this page

@maskito/vue is a light-weighted library to use Maskito in as a Vue directive.

Prerequisites

To get the most out of this guide, you should review the topic "Core Concepts" first.

Getting Started

Install libraries

    
      npm install @maskito/{core,vue}

and use Maskito

    
      import {createApp} from 'vue';
import {maskitoNumber} from '@maskito/kit';
import {maskito} from '@maskito/vue';

createApp({
  template: '<input v-model="value" v-maskito="options" />',
  directives: {maskito},
  data: () => ({
    value: '123_456',
    options: maskitoNumber({
      thousandSeparator: '_',
    }),
  }),
}).mount('#vue');

See the result of above code example in action:

Query nested input element

Pass a predicate to elementPredicate to find input element for you, if you do not have a direct access to it. For example, you use component from some UI Kit library.

By default Maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. 
    
      import {createApp} from 'vue';
import {maskitoNumber} from '@maskito/kit';
import {maskito} from '@maskito/vue';

createApp({
  template: '<CustomInput v-model="value" v-maskito="options" />',
  directives: {maskito},
  data: () => ({
    value: '123456',
    options: {
      ...maskitoNumber(),
      elementPredicate: (host) => host.querySelector('input')!,
    },
  }),
}).mount('#vue');

Best practices & Anti-Patterns

Avoid inlining options object, otherwise Maskito will be recreated on every update 
    
      <!-- Best Practice ✅-->
<input v-maskito="options" />

<!-- Anti-Pattern ❌-->
<input v-maskito="{ mask: /^\d+$/ }" />