vue-mask's Introduction

Vue Input Mask

Máscara de inputs simples para VueJS e NuxtJs

Principais tipos de entradas (inputs)

CPF
CNPJ
Telefone
... e muito mais

Documentação oficial

Vue The Mask

Utilizando em projetos NuxtJS

Você pode seguir o tutorial abaixou ou assistir o vídeo explicativo

Primeiro instale a dependência

$ yarn add vue-the-mask
or
$ npm i -S vue-the-mask

Crie um plugin para instanciar o VueTheMask

Esse deve ser o caminho da pasta: plugins/mask.js

Esse deve ser o conteúdo do plugin:

import Vue from 'vue'
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Declare o plugin no seu arquivo de configuração nuxt.config.js

plugins: [
    "@/plugins/mask"
  ],

Aplique a máscara ao seu imput

Existe 3 formas de se fazer isso, no meu caso prefiro via diretiva, conforme o exemplo abaixo

<label for="tel" class="label" >Com mascará</label>
<input id="tel" class="input" type="tel" placeholder="(62) 98888-7777" v-mask="['(##) ####-####', '(##) #####-####']">

Nesse repositório contem a implementação em NuxtJS citada acima.

Utilizando em projetos VueJS CLI

Primeiro instale a dependência

$ yarn add vue-the-mask
or
$ npm i -S vue-the-mask

Importe o VueTheMask no componente

Existe 3 formas de se fazer isso, no meu caso prefiro via diretiva, conforme o exemplo abaixo

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}

Aplique a máscara ao seu imput

<label for="tel" class="label" >Com mascará</label>
<input id="tel" class="input" type="tel" placeholder="(62) 98888-7777" v-mask="['(##) ####-####', '(##) #####-####']">

Recommend Projects