[Vuejs]-Materialize css triggers are not working in Vue js

3👍

Don’t use a DOMContentLoaded event. Vue already has lifecycle methods for this reason.

export default {
    name: 'Home',
    mounted() {
        var elems = document.querySelectorAll('.carousel');
        var instances = M.Carousel.init(elems, {
            fullWidth: true,
            indicators: true
        });
    }
};

You’ll also need to define M if you’re using just a script tag

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.externals({
      'M'
    })
  }
}

or download the script from npm and import M from 'materialize-css'.

Leave a comment