Enable term 'jQuery' in Vue CLI 3 scaffolded project
Sat, Aug 11, 2018I 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