Thursday, July 6, 2017

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.