Vue.js, how to import and use JQuery to initialize a materialize-css carousel

Question

I am trying to use materialize-css with Vue, things are working fine, but there are certain materialize components needs to be initialized using JS or Jquery, Now, I didn't use Jquery before, I installed it using npm i -s jquery, but I am a little stuck as to how and where to import and use it. the code below is from materialize docs on how to initialize the carousel. hints on how to use it in a .vue component or any alternative way is highly appreciated?

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.carousel').carousel();
  });
      

thanks in advance.

Answer 1

in your component initialize that code in mounted hook without using jquery:

export default {
     ...
   mounted(){
        document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.carousel');
        var instances = M.Carousel.init(elems);
      });


    }