How to use jQuery with Vue.js

Since last week I had been working with Vue.js and struggling to get it working with jquery. I know you're probably thinking that the ideia behind Vue.js is to replace jquery but actually it can be really hand to have it.

Therefore, to start, I advise you to use Vue CLI and I assume you already have it installed in your system.

Let's start by creating a new vue project

$ vue create new-project

Once it's finished, let's add jquery to it

$ npm install jquery --save

or if you are a yarn guy, you'll have to run

$ yarn add jquery --save

Now, let's create a new file, called vue.config.js and add the following code

const webpack = require('webpack')

module.exports = {
    chainWebpack: config => {
        config.plugin('define').tap(definitions => {
            definitions[0] = Object.assign(definitions[0], {
                $: 'jquery',
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                jQuery: 'jquery',
                _: 'lodash'
            })
            return definitions
        })
    }
}

edit you .eslintrc.js file and add the following lines

  globals: {
    $: false,
    jQuery: false,
  },

this will allow the validation to work correctly.

Finally, add the following in side main.js, under the src folder

window.$ = window.jQuery = window.jquery = require("jquery");

It's all done .

If you want to test it, simply edit src/vuews/Home.vue file and change it to the following:

<template>
  <div class="home">
    <img src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  mounted() {
    console.log($(".home").html());
  }
};
</script>

start vue development environment

$ yarn serve

open your browser in http://localhost:8080, open you console, by pressing F11 and you'll see the following

Home.vue?76f2:18 <img src="/img/logo.82b9c7a5.png"><div data-v-469af010="" class="hello"><h1 data-v-469af010="">Welcome to Your Vue.js App</h1><p data-v-469af010="">
    For guide and recipes on how to configure / customize this project,<br data-v-469af010="">
    check out the
    <a data-v-469af010="" href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
  </p><h3 data-v-469af010="">Installed CLI Plugins</h3><ul data-v-469af010=""><li data-v-469af010=""><a data-v-469af010="" href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank">pwa</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li></ul><h3 data-v-469af010="">Essential Links</h3><ul data-v-469af010=""><li data-v-469af010=""><a data-v-469af010="" href="https://vuejs.org" target="_blank">Core Docs</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://forum.vuejs.org" target="_blank">Forum</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://chat.vuejs.org" target="_blank">Community Chat</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://twitter.com/vuejs" target="_blank">Twitter</a></li></ul><h3 data-v-469af010="">Ecosystem</h3><ul data-v-469af010=""><li data-v-469af010=""><a data-v-469af010="" href="https://router.vuejs.org" target="_blank">vue-router</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://vuex.vuejs.org" target="_blank">vuex</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a></li><li data-v-469af010=""><a data-v-469af010="" href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li></ul></div>