DEV Community

Cover image for How to add jQuery to Vue
Ayekple Clemence
Ayekple Clemence

Posted on • Originally published at anansewaa.com

How to add jQuery to Vue

If you are from a jQuery background, the idea of not being able to use jQuery in your frontend application can be stressing. Fortunately, that is not the case with Vue. Integrating JQuery with Vue is incredibly easy and we can do it in a few simple steps.

Apparently, jQuery has a lot of awesome features you probably want to use.

In this post, I will assume you have very good knowledge of how Vue works.

Installing jQuery

For npm, jQuery can be installed using the following command:

npm i jquery

For yarn, install jQuery with the following command:

yarn add jquery

You can also follow the installation process on (https://www.npmjs.com/package/jquery)

Importing jQuery into Vue

Using Vue CLI, you should have main.js. Import jQuery using ES6/ES2015.

main.js
--------
import $ from 'jquery'

Usually, including jQuery look like this

var $ = require('jquery')

Importing jQuery into a single Vue component

Mostly, you only need jQuery in a specific component. However, this is considered good practice.

Home.vue
--------
import $ from 'jquery'

Conclusion

Finally, we can now install and use jQuery in Vue. I believe using jQuery in your application will probably save a lot of time for you. But, it might have performance issues. So, I recommend using vue packages that solve the same issue.

Moreover, the post on Vue packages version mismatch might be useful if you have issues with your vue package.

Top comments (4)

Collapse
 
stefandorresteijn profile image
Stefan Dorresteijn

But... why? This is exactly what you shouldn't be doing in any JS framework. Instead of trying to do something with jQuery, do it with the framework, because that's what the framework is for.

Collapse
 
victorious profile image
Victor Nwakpa • Edited

Because some plugins requires jQuery like fancybox. Without the the jQuery fancy box wouldn't work even after you install it in Vue

Collapse
 
lukamo1996 profile image
Luka Momcilovic

Try making a div follow your scroll smoothly without jQuery.

Collapse
 
lukamo1996 profile image
Luka Momcilovic

Adding jquery to components like this will cause issues longer down the line if you plan to use something like bootstrap modal()-functions.