How could I use materialize CSS CDN in nuxt.js? - vue.js

Question

I want to use the 'dropdown' css in my nav bar, so I create a component;
Here is the header component:
<template>
<no-ssr>
<div>
<ul id='dropdown' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="container">
<i class="material-icons right">home</i>Home
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" data-activates="dropdown" data-beloworigin="true" data-hover="true">Dopdown<i
class="material-icons right">arrow_drop_down</i></a></li>
<li>About</li>
<li>Contact</li>
<li><i class="material-icons right">search</i>Search</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</no-ssr>
</template>
I didn't run npm install stuff... like that, I just import the materialize css through CDN;
Here is my nuxt.config.js:
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'}
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js' }
]
},
When I run 'npm run dev' in localhost, The 'dropdown' didn't work;
When I move my mouse on the button, nothing happened, when I click the button, nothing happened either.
And I got the error by accident,
Could anybody help me solve this problem? I really appreciate it.

Answer 1

First you need a Button/Link which opens your first Dropdown. (Note the "data-target"-Attribute)
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
Then you need to initialize this button:
$('.dropdown-trigger').dropdown();
See https://materializecss.com/dropdown.html

Answer 2

Finally, it works. I add the Initialization in mount() function,
Here is the 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
}
);
}