Add Jquery to Vue-Cli 3

Question

I'm currently trying to add Jquery to my vue-cli project. I am aware of the missbehaviour it can produce, but anyway; Since there is no build/webpack.base.conf.js anymore I tried editing vue.config.js by adding:

 module.exports {
    ...
    chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      definitions[0] = Object.assign(definitions[0], {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      })
      return definitions
    })
  }
   ...
 }

or

const webpack = require('webpack')

module.exports {
   ...
 plugins: [
  new webpack.ProvidePlugin({
     $: 'jquery',
     jquery: 'jquery',
     'window.jQuery': 'jquery',
     jQuery: 'jquery'
   })
  ]
   ...
 }

Both options don't seem to work. With #1 nothing seems to happen, with #2 I get the compile error; "plugins" is not allowed or 'ProvidePlugin' is unresolved and when I try to import jQuery directly in main.js and define the $ operator, jquery stays undefinded when I try to use it.

Big thank you in advance!

Did you see [this question](https://stackoverflow.com/q/49626085/3233827)? — ssc-hrep3, Nov 18 '18 at 10:42
Yes, thank you. I already tried that. Didn't seem to work for me but I will try it again and maybe this post will help some more when enhanced. — nonNumericalFloat, Nov 18 '18 at 10:51
@nonNumericalFloat if you found the answer - please add an answer under the question (and not inside the question itself). — Dekel, Nov 18 '18 at 15:11

score 28 · Accepted Answer · edited Feb 05 '20 at 09:33

28

Solved it by adding to main.js

window.$ = window.jQuery = require('jquery');

That did it for me and jQuery is now available globally.

Another approach would be;

Vue.use({
install: function(Vue, options){
    Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project
    }
});

I hope this will help someone stumbling over the same problem in the future. If you still can't figure it out, check this question or have a look at the documentation.

edit: make sure you ran npm install jquery.

edited Feb 05 '20 at 09:33

AdityaDees

1,022
18
39

answered Nov 18 '18 at 15:53

nonNumericalFloat

1,348
2
15
32

1

remembering that is necessary to have Jquery module available in npm, you can do it doing: `npm install jquery` – Canatto Filipe May 24 '19 at 12:39
Nowadays I would consider this as bad advice. As Vue is highly reactive, Jquery may change application state without lettings Vue know about the new state. This may cause inconsistent state-changes. Use causiously :) See https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/ – nonNumericalFloat Oct 15 '21 at 15:37

score 18 · Answer 2 · answered Dec 18 '18 at 10:37

#2 You forget to add configureWebpack into vue.config.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

score 8 · Answer 3 · answered Apr 27 '19 at 12:17

I did it by following steps:

first install jquery

npm install jquery --save-dev

in any component or view:

<script>

import jQuery from "jquery";
const $ = jQuery;
window.$ = $;

....
....
....

or as above answer, both are same:

window.$ = window.jQuery = require("jquery");

now you can use anywhere in the page, for globally availability, simply follow the above said answer.

score 0 · Answer 4 · edited Jun 07 '21 at 06:15

0

Add the following in vue.config.js

chainWebpack: (config) => {
  config
    .plugin('provide')
    // eslint-disable-next-line global-require
    .use(require('webpack').ProvidePlugin, [{
      'window.Quill': 'quill/dist/quill.js',
      Quill: 'quill/dist/quill.js',
      'window.jQuery': 'jquery/src/jquery.js',
      jQuery: 'jquery/src/jquery.js',
    }]);
},

edited Jun 07 '21 at 06:15

Vee6

1,527
3
21
40

answered Jun 06 '21 at 17:39

Igor Augusto

1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Jun 11 '21 at 06:15

Add Jquery to Vue-Cli 3

4 Answers4

Linked