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?

bubakazouba · Accepted Answer · 2018-01-18 00:32:07Z

69

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'

// ...

edited Jan 18, 2018 at 0:32

bubakazouba

1,6713 gold badges22 silver badges34 bronze badges

answered Sep 23, 2016 at 6:12

prograhammer

20.7k13 gold badges95 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prograhammer Over a year ago

Try putting in something else into the plugin below the jquery...like 'test': require('../src/test') and see if you get test in all your components. I did this as well and it works.

Wagner · Accepted Answer · 2019-04-08 11:42:04Z

15

import jquery within <script> tag in your vue file.

I think this is the easiest way.

For example,

<script>
import $ from "jquery";

export default {
    name: 'welcome',
    mounted: function() {
        window.setTimeout(function() {
            $('.logo').css('opacity', 0);   
        }, 1000);
    } 
}
</script>

answered Apr 8, 2019 at 11:42

Wagner

3732 silver badges9 bronze badges

Comments

Popnoodles · Accepted Answer · 2021-04-21 12:37:56Z

15

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

edited Apr 21, 2021 at 12:37

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

answered Mar 16, 2018 at 4:02

Rafael Andrs Cspedes Basterio

4,4311 gold badge19 silver badges12 bronze badges

Comments

Lying_cat · Accepted Answer · 2018-12-20 02:20:06Z

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

Tremendus Apps · Accepted Answer · 2016-06-20 18:13:04Z

6

You need to use either the globals loader or expose loader to ensure that webpack includes the jQuery lib in your source code output and so that it doesn't throw errors when your use $ in your components.

// example with expose loader:
npm i --save-dev expose-loader

// somewhere, import (require) this jquery, but pipe it through the expose loader
require('expose?$!expose?jQuery!jquery')

If you prefer, you can import (require) it directly within your webpack config as a point of entry, so I understand, but I don't have an example of this to hand

Alternatively, you can use the globals loader like this: https://www.npmjs.com/package/globals-loader

answered Jun 20, 2016 at 18:13

Tremendus Apps

1,59512 silver badges22 bronze badges

Comments

ccleve · Accepted Answer · 2019-03-03 21:22:46Z

6

There's a much, much easier way. Do this:

MyComponent.vue

<template>
  stuff here
</template>
<script>
  import $ from 'jquery';
  import 'selectize';

  $(function() {
      // use jquery
      $('body').css('background-color', 'orange');

      // use selectize, s jquery plugin
      $('#myselect').selectize( options go here );
  });

</script>

Make sure JQuery is installed first with npm install jquery. Do the same with your plugin.

edited Mar 3, 2019 at 21:22

answered Mar 3, 2019 at 19:40

ccleve

15.9k30 gold badges102 silver badges173 bronze badges

Comments

lukpep · Accepted Answer · 2016-06-21 06:46:09Z

3

I use it like this:

import jQuery from 'jQuery'

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },

answered Jun 21, 2016 at 6:46

lukpep

1,5681 gold badge12 silver badges18 bronze badges

2 Comments

Luuk Van Dongen Over a year ago

But then how do you add a plugin to jQuery? Like I intend to do.

Martin Naughton Over a year ago

To include a plugin use require after the jquery import above. require("<jquery-plugin-name>") then call it like normal in the code jQuery(window).<pluginmethod>

Vladimir Salguero · Accepted Answer · 2019-02-12 19:19:04Z

1

Step 1 We place ourselves with the terminal in the folder of our project and install JQuery through npm or yarn.

npm install jquery --save

Step 2 Within our file where we want to use JQuery, for example app.js (resources/js/app.js), in the script section we include the following code.

// We import JQuery
const $ = require('jquery');
// We declare it globally
window.$ = $;

// You can use it now
$('body').css('background-color', 'orange');

// Here you can add the code for different plugins

answered Feb 12, 2019 at 19:19

Vladimir Salguero

5,9773 gold badges49 silver badges51 bronze badges

Comments

Andrew · Accepted Answer · 2022-07-29 04:13:19Z

1

In Vue3 thats using the TypeScript version you can add it like this.

npm i --save jquery
npm i --save @types/jquery

Then in your main.ts file.

import jQuery from 'jquery'
window.$ = jQuery

Then you can use it anywhere in your application.

<script setup lang="ts">
  $(document).ready(() => console.log('test'))
</script>

answered Jul 29, 2022 at 4:13

Andrew

4568 silver badges15 bronze badges

Comments

Wicfasho · Accepted Answer · 2021-02-09 13:06:55Z

0

run npm install jquery --save

then on your root component, place this

global.jQuery = require('../node_modules/jquery/dist/jquery.js');
var $ = global.jQuery;

Do not forget to export it to enable you to use it with other components

export default {
  name: 'App',
  components: {$}
}

answered Feb 9, 2021 at 13:06

Wicfasho

3313 silver badges14 bronze badges

Comments

Dharman · Accepted Answer · 2021-08-28 16:21:25Z

0

I had the same issue on my project. I fixed it by importing a separate js file to my vue component. I created a const that has methods that can use jQuery on the main.js.

main.js

export const jQueryMixin = {
    method: {
        init() {}
    }
}

And on my vue component, I imported and used the object I created on the main.js.

Home.vue

import { jQueryMixin } from '../../main';

export default {
    created() {
        jQueryMixin.method.init();
    }
}

edited Aug 28, 2021 at 16:21

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 28, 2021 at 16:16

Mark Joshua Fajardo

1422 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to use a jQuery plugin inside Vue

11 Answers 11

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related