M is not defined when using Materialize-css with Vue

Question

I am using Materialize css with Vue. I have installed as an npm module and imported it in main.js

import Material from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
Vue.use(Material);

All the css is working fine, however, whene I try to use any javascript component like materialbox like this

const mb = document.querySelectorAll(".materialboxed");
M.MaterialBox.init(mb, {});

It gives an error that "M" is not defined. What should I do? I have added materialize-css as a dependency to the package.json.

Answer 1

Add following code in your component(say App.vue):

import M from 'materialize-css'

export default {
...
mounted () {
    M.AutoInit()
},
...