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.$ = $;