how to integration materialize js in vue and larav

Question

I tried to require materialize in Vue and Laravel

in bootstrap.js I have

window.Materialize = require('materialize-css');

in App.vue component I have

mounted(){
  Materialize.toast('I am a toast!', 4000)
}

and received

"Uncaught ReferenceError: Materialize is not defined"

message.

Answer 1

Either drop a script tag with materialize js or, make sure jquery is loaded before requiring materialize. I suppose you have a browserify setup and if you do you can do something like that:

require('jquery')(window);
require('materialize-css')(window); 

Or something like that:

global.jQuery = require('jquery')
global.Materialize = require('materialize-css')

Or import globally jQuery only then simply var Materialize=require('materialize-css') and use the variabile instead.

For webpack setups add a plugin for the stuff you have installed via npm and need globally:

  plugins:[
   new webpack.ProvidePlugin({
   $: "jquery",
   jQuery:'jquery',
   jquery:'jquery'
 }),
],