How to include jQuery into Vue.js

Suppose you have Vue project created with vue-cli (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:

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

If you are using ESLint, open .eslintrc.js and add next globals: {

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

Now you are ready to go. Use $ anywhere in your js.

NOTE You don't need to include expose loader or any other staff to use this.
#jquery #eslint #vuejs
0
Ivan Borshchov profile picture
May 05, 2017
by Ivan Borshchov
Did it help you?
Yes !
No

Best related