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.bas

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.

Answer 2

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.

Answer 3

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