Skip to content

Latest commit

 

History

History
87 lines (59 loc) · 1.88 KB

README.md

File metadata and controls

87 lines (59 loc) · 1.88 KB
Raw

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 YouTube Video Views

  1. Primeiro instale a dependência
$ yarn add vue-the-mask
or
$ npm i -S vue-the-mask
  1. 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)
  1. Declare o plugin no seu arquivo de configuração nuxt.config.js
plugins: [
    "@/plugins/mask"
  ],
  1. 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

  1. Primeiro instale a dependência
$ yarn add vue-the-mask
or
$ npm i -S vue-the-mask
  1. 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}
}
  1. 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="['(##) ####-####', '(##) #####-####']">