How to use a jQuery plugin inside Vue

Question

I'm building a web application inside VueJS but I encounter a problem. I want to use a jQuery extension (cropit to be specific) but I don't know how to instantiate/require/import it the right way without getting errors.

I'm using de official CLI tool and de webpack template for my App.

I included jQuery like this in my main.js file:

import jQuery from 'jQuery' window.jQuery = jQuery 

Now I'm building an image editor component where I want to instantiate crept like this:

export default {   ready () {     $(document).ready(function ($) {       $('#image-cropper-wrapper-element').cropit({ /* options */ })     })   },  } 

But I keep getting errors...Now my question is how to properly instantiate jQuery and plugins via NPM/Webpack/Vue?

Thanks in advance!

Answer 1

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'  // ... 

Answer 2

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