How to use a jQuery plugin inside Vue How to use a jQuery plugin inside Vue vue.js vue.js

How to use a jQuery plugin inside Vue


Option #1: Use ProvidePlugin

Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

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

Option #2: Use Expose Loader module for webpack

As @TremendusApps suggests in his answer, add the Expose Loader package:

npm install expose-loader --save-dev

Use in your entry point main.js like this:

import 'expose?$!expose?jQuery!jquery'// ...


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

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

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

Also at top of file add:

const webpack = require('webpack')

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 stuff to use this.

Originally from https://maketips.net/tip/223/how-to-include-jquery-into-vuejs


First install jquery using npm,

npm install jquery --save

Add in app.js before require('/[path_to]/main.js');

global.jQuery = require('jquery');var $ = global.jQuery;window.$ = $;