How can I init Materialize in nuxt.js?

[xiaok365]

I want to use these amazing stuff in nuxt.js, server side render is important. But the tutorial on the offical website is not so clear, I got some errors. I run the command 'npm i materialize-css' to install it. The version below: "materialize-css": "^0.100.2"

I use the normal way to init the 'dropdown' component, when I move my mouse on the button, or click the button, nothing happend. The 'dropdown' didn't work.

Html code:

            <ul class="right hide-on-med-and-down">
              <li><a class="font-color" href="#"><i class="material-icons right">chrome_reader_mode</i>Blog</a></li>
              <li>
                <a class="dropdown-button font-color" data-activates="drop-list">
                <i class="material-icons right">arrow_drop_down</i>Test
                </a>
              </li>
            </ul>

<!--dropdown list-->
    <ul id='drop-list' class='dropdown-content'>
      <li><a href="#!" class="grey-text">A</a></li>
      <li class="divider" tabindex="-1"></li>
      <li><a href="#!" class="grey-text">B</a></li>
      <li class="divider" tabindex="-1"></li>
      <li><a href="#!" class="grey-text"><i class="material-icons ">message</i>C</a></li>
    </ul>

Component init code:

mounted() {
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.dropdown-button');
        let options={
          inDuration: 300,
          outDuration: 225,
          constrainWidth: true, // Does not change width of dropdown to that of the activator
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: true, // Displays dropdown below the button
          alignment: 'left', // Displays dropdown with edge aligned to the left of button
          stopPropagation: false // Stops event propagation
        }
        var instances = M.Dropdown.init(elems, options);
      });
}

Then I try to init it through jquery, but I got the error either.

'$ is not defined'.

I don't know how to import the jquery and the materialize into my nuxt.js project. Here is the jquery init code.

mounted(){
        $('.dropdown-button').dropdown({
          inDuration: 300,
          outDuration: 225,
          constrainWidth: true, // Does not change width of dropdown to that of the activator
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: true, // Displays dropdown below the button
          alignment: 'left', // Displays dropdown with edge aligned to the left of button
          stopPropagation: false // Stops event propagation
        }
      );
}

The 'nuxt.config.js':

module.exports = {
   css: [
    'materialize-css/dist/css/materialize.css'
  ],
  plugins: [
    $:jquery
  ]
  ......
}

Now I have no idea about how to use it in nuxt.js. Could anybody tell me how I can use it ? I really appreciate it . Thanks

[HardToGuess]

Im using this: (nuxt.config.js part, see plugins section):

css: [
  '~/assets/css/main.css',
  '~node_modules/materialize-css/dist/css/materialize.css'
],
build: {
  vendor: ['axios', 'vue-toasted', 'moment', 'lodash', 'vue-recaptcha', '@nuxtjs/google-adsense'],
  /*
  ** Run ESLINT on save
  */
  extend (config, ctx) {
    if (ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Materialize: 'materialize-css'
    })
  ],
}

And now i can init something like select (on any page):

created () {
  if (process.client) {
    $(document).ready(() => {
      const elem = document.querySelector('select')
      Materialize.FormSelect.init(elem)
    })
  }
}

Ofcourse, dont forget to install jquery: npm i jquery --save