nuxt.js-$（…）.slider不是函数

Question

I want to use jquery in nuxt.js, I added jquery in nuxt.config.js like this:

build: {
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            '_': 'lodash'
        })
    ]
}

and then I used jquery code in in my template and I put jquery code in mounted() to avoid "document is not defined" error:

mounted: () => {
    $("#volume").slider({
        min: 0,
        max: 100,
        value: 0,
        range: "min",
        slide: function(event, ui) {
            setVolume(ui.value / 100);
        }
    });
    ....
}

but when I run this, I get $(...).slider is not a function in browser. Is there anything special I should do to get it to work in nuxt.js?

Answer 1

$().slider is a jQuery UI function. You also need to add jquery-ui to your project.