Use Materializecss Alpha with Vue

user_3848424 0
Viewed 1097

Hearing of Materializecss Alpha release I was excited because I was a huge fan of it. But I am confused on how to import it into a typical vue.js app and initializing it plugins

for example, how we implement this in Vue:

var instance = new M.Carousel({
  fullWidth: true,
  indicators: true
})
materialize vue.js
2 Answers

I think that it could be as simple as that:

(function($){
  $(function(){
  
 $('.carousel').carousel({
    fullWidth: true,
    indicators: true
  });

  }); // end of document ready
})(jQuery); // end of jQuery name space

new Vue({
  el: '#app',
  data: {
    images: [{
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link1"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link2"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link3"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link4"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link5"
      }
    ]
  }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css">

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>


<div id=app>
  <div class="carousel">
    <div v-for="elem in images">
      <a class="carousel-item" :href="elem.link"><img :src="elem.img" :alt="elem.link"></a>
    </div>
  </div>

</div>

user_32508220
Related