How To Use jQuery Into Vue.js Using Webpack?

For global access to jQuery there exists several methods. In my most recent vue.js and webpack project, I wanted global access to jQuery so I added using the following method.

Suppose you have Vue.js project created with vue-cli and node. (e.g. vue init webpack my-project ).
Go to project dir and run

  npm install jquery --save-dev

Open file build/webpack.base.conf.js and add plugins :

var webpack = require('webpack');

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

Go to project dir and run

   npm run dev

This then means that jquery is accessible from within the JavaScript source code via global references $, jquery and jQuery. Now you are ready to go.