Open xiaok365 opened 6 years ago
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
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:
Component init code:
Then I try to init it through jquery, but I got the error either.
I don't know how to import the jquery and the materialize into my nuxt.js project. Here is the jquery init code.
The 'nuxt.config.js':
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