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!

Windhoek

Did you see this question? – Annexation

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. – Windhoek

@Windhoek if you found the answer - please add an answer under the question (and not inside the question itself). – Coinsurance

@Coinsurance Thanks for pointing that out. – Windhoek

You can now accept the answer :) – Coinsurance

Answer 1

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.

Windhoek

remembering that is necessary to have Jquery module available in npm, you can do it doing: npm install jquery – Leilani

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 vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin – Windhoek

Answer 2

#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'
      })
    ]
  },
}

Transpadane

Answer 3

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.

Seventeen

Answer 4

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',
    }]);
},

Actinolite

While this code may solve the question, including an explanation 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. – Retaretable