Usage as directive

[Darkside73]

Any chances to use this as directive to integrate with UI frameworks such as vuetify?

[neves]

v-money already can be used as directive, but still doesn't work with vuetify because the root element is not the input. If I fix it, I'll try to do the same with vue-the-mask.

[neves]

Just fixed it for v-money. I'll let you know if it works for vue-the-mask

[leok85]

v-money works great as directive! I am looking forward for the vue-the-mask

[gfviegas]

@neves any news? v-mask sucks and i dont wanna stick with it!

[neves]

@gfviegas Try the latest alpha version using:
yarn add vue-the-mask@alpha

[gfviegas]

@neves

nope...

console error thrown:

vue-the-mask.js?3d13:1 Uncaught ReferenceError: mask is not defined
    at Object.defineProperty.value (vue-the-mask.js?3d13:1)
    at t (vue-the-mask.js?3d13:1)
    at Object.eval (vue-the-mask.js?3d13:1)
    at t (vue-the-mask.js?3d13:1)
    at e.exports.#.pattern (vue-the-mask.js?3d13:1)
    at eval (vue-the-mask.js?3d13:1)
    at eval (vue-the-mask.js?3d13:1)
    at eval (vue-the-mask.js?3d13:1)
    at Object.<anonymous> (app.js:1830)
    at __webpack_require__ (app.js:660)

I've tried several masks combination, with raw input tag and a custom input component but none of them worked.

I'm using v-model and i've tried using the v-mask as you've inserted in the docs v-mask="'##/##/####'" to test

[gfviegas]

Oh, @neves , i've noticed that in docs.vue you've inserted the working example as:

<div class="field" v-mask="'##/##/####'">
    <input type="tel" placeholder="dd/mm/yyyy" />
</div>

but it's telling to insert the v-mask on the input tag on the example code. Which one is right?

[gfviegas]

@neves Should I import anything in my .vue file and declare it as a directive?

EDIT: Actually I think it's a problem with your version. Even though I use the way I was using (with your component as usual), the error is thrown. It only goes away when I comment the Vue.use(VueTheMask) line.

[neves]

Try the latest version, there was a typo.
The correct way to use is in the input.

[gfviegas]

@neves the mask simply won't apply.

Do i need to import anything and declare as a directive or a component?

I'm currently doing so globally, in my main file:

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

[nilkesede]

@neves You may need to update the package version on npm.

@gfviegas use "vue-the-mask": "vuejs-tips/vue-the-mask" on your package.json to get the version on the master branch. It's working fine!

[neves]

@gfviegas Try again 0.11.0-alpha.1

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

Or just directive inside component:

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

[neves]

Implemented in version v0.11.0-beta

[marcellopato]

Caro @neves , sou meio novato em VueJS e adorei seu pacote, mas gostaria de saber como o uso em uma página Laravel.
Nessa página eu já tenho uma instancia Vue para duplicar linhas de um form e agora quero usar o mask para campos como CNPJ, CPF, etc.

Dentro da tag <script> tenho:

import VueTheMask from 'vue-the-mask'
	var app = new Vue({
		el: '#app',
		data: {
			vidas: [
				{
					nome: '',
					grau: '',
					nascimento: ''
				}
			]
		},
		methods: {
			addNovaVida () {
				this.vidas.push({
					nome: '',
					grau:'',
					nascimento: ''
				})
			},
			deleteVida (index) {
				this.vidas.splice(index, 1)
			}
		}
	})

E no input onde quero mascarar:

<input type="text" class="form-control" id="CpfCnpj" aria-describedby="CpfCnpj" v-mask="'##.###.###/####-##'">

Mas não está rolando. Que bobagem estou fazendo?
Obrigado!

[farnetani]

@marcellopato você importou o pacote de forma errada.

Faça conforme abaixo que dará certo:

import { mask } from 'vue-the-mask'

export default {
  directives: { mask },

[marcellopato]

@marcellopato você importou o pacote de forma errada.

Faça conforme abaixo que dará certo:

import { mask } from 'vue-the-mask'

export default {
  directives: { mask },

Obrigado @farnetani ! Agora deu certinho!
Feliz Natal!