Enable term 'jQuery' in Vue CLI 3 scaffolded project

Sat, Aug 11, 2018

I have been trying for way too long to figure out how to enable the term ‘jQuery’ to be used in my Vue CLI 3 scaffolded project. In my case I am using Semantic UI for creating the interface which requires jQuery.

Apparently there is something called chainWebpack now. No idea what it is but the following code when added to vue.config.js in root seems to solve the problem.

var webpack = require('webpack')
module.exports = {
    chainWebpack: config => {
        config
            .plugin('jquery')
            .use(webpack.ProvidePlugin, [{
                $: "jquery",
                jQuery: "jquery",
            }])
    }
}

There is probably other ways to do that. Or not. But this allows the Semantic UI library to be able to use jQuery.

Extra..

If you want to access jQuery from the browser, you have to add window.jQuery = require('jquery') in main.js

-- end --

Usman Khwaja

Front end engineer & Jamstack developer

Code on Github.

Built with Hugo and deployed using Netlify