Cover image for How to add jQuery to Vue

How to add jQuery to Vue

ayekpleclemence profile image Ayekple Clemence Originally published at anansewaa.com ・1 min read

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.

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.

import $ from 'jquery'


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.

Posted on by:

ayekpleclemence profile

Ayekple Clemence


I'm a Fullstack Developer and Blogger. I love trying new things and sharing them


markdown guide

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.


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