How to use jQuery plugins with Vue

Posted 1 year ago by Leff7

I have a laravel app, where I have vue components, and in one of them I am trying to use input field for which I want to use this jQuery plugin, to make masked inputs. I have a main app.js file where I import all other files:

require('./bootstrap');
require('./slider');
require('./search-form');
require('./scroll-spy');
require('./smooth-scroll');
require('./autocomplete');
require('./jquery.maskedinput');
require('./form-mask'); 

And this is how I am trying to make my input masked in form-mask file:

$(document).ready(function () {
  $("[data-mask='date']").mask("99/99/9999");
});

And this is the field in the vue component:

<input type="text" data-mask="date" placeholder="DD/MM/YYYY" class="info-data-input">

But, I get an error:

$(...).mask is not a function

Why is that, and how can I use that plugin inside my vue components?

Please sign in or create an account to participate in this conversation.