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.

Comments

[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.

[Victor Nwakpa]

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