Integrate jQuery with Vue.js

I work with many JavaScript libraries and few frameworks. Sometimes I must “merge” several scripts – not always is simple. One example is Vue.js and jQuery on the same site. It may be strange, because Vue modify and make interface reactivity, and jQuery can also modify DOM. But… in few situations I must do it – because Vue “doesn’t know” data, doesn’t know what and how modify – it can only prepare information for jQuery. Also, it isn’t problem, if we separate both things – jQuery should never touch elements from Vue. Ok, let’s start.

Nuxt version

First example is a Nuxt version – because in this case, we can add external scripts in very, very simple way. Just add jQuery from CDN on scripts headers on page or component:

export default {
    head: {
        script: [
            { src: '' },

Now we can use jQuery in our methods:

methods: {
    addSomethingInJquery () {
        this.valueFromJquery = $('#myBox').val()

And it should works. Yes, only this. Second option is to use package from npm and integrate jQuery into Vue – without using CDN, but build-in into our app. I think it may be better, but all depends on our needs. Sometimes CDN and smaller chunks is best option. To install jQuery module for Vue just use

NPM module

npm install vue-jquery --save

And then use its in Vue:

import vue-jquery from 'vue-jquery'


Now you can use jQuery with Vue.js.

7 thoughts on “Integrate jQuery with Vue.js

  1. hello
    first of all, ty for your post i’ve been looking for this kind of solution for a long time and this seems to be very clear.

    when i use this in my project, which i created that project just for trying to use jquery in vue,
    i get a “ReferenceError: $ is not defined” error.
    why it’s throwing me this kind of exception and what im i supposed to do?
    ty for helps.

  2. If you are new to VUE then use pure html file that will help easy to understand. Otherwise use npm i jquery to import jquery from node-modules that will also works. The below code helped to run jquery inside VUE with pure html


    .invisible {
    display: none;


    This is from jquery {{items}} click

    var vueEx = new Vue({
    mounted() {
    $('.box').on('click', function(event) {

Leave a Reply to Bala Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.