/ Development

VueJS & jQuery

Over the past few weeks I've come across a bunch of questions regarding VueJS and jQuery. These range from "Can I use both?", "How do I..." and "Should I use them together?".
With that in mind, I thought I share my five cents worth of opinions on the subject in the hopes that; a) I can enlighten people on the thought process, b) that I am not entirely wrong about my opinion.
I'll try and make this post simple and keep my rambling opinios towards the end of the post.

Can I use jQuery and VueJs?

The short answer is: yes.
Both frameworks work well together and can be used together. This is specially useful if you are using some UI framework like Bootstrap, which requires jQuery to function properly.
jQuery is mainly used for DOM manipulation, but it has things like AJAX which can make it useful for situations where you are using Vue and Bootstrap. It avoids you requiring axios or other HTTP related modules.
A note, further down I expose my opinion about this setup.

How do I ...?

Quickly followed by the "Can I..." questions, we have the "How do I..." series. I am not going to answer all the questions I've seen, and rather go with the aproach: "Teach you to fish".
A typical use-case for this would be with a modal window (actually most of the questions are usually related to modal windows). How would one go about openning and closing bootstrap modal windows from vue?

Starting from the very basics... (I won't go into how you could make a modal an independant and reusable component in this article), here is a typical scenario:

<template>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" v-on:click="showModal()">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name:'MyComponent',
  data () {
    return {}
  },
  methods: {
      showModal () {
          $('#myModal').modal('show');
      }
  }
}
</script>

Ok that seems like a chunck to digest at a frist glance, but it is amazingly simple once you notice that most of the code is standard boilerplate code for bootstraps modal.

Our Template has two important things:

  1. A button that has an v-on:click attribute, that fires our showModal() method.
  2. The boilderplate code for the modal (straight off Bootstrap's site).

Below, we have a standard component declaration with a method called showModal()
This is where all the "magic" happens. We just call the jQuery method. Not very magic, and not very hard right?

What did we learn from this? Well, basically, you can call any jQuery reactively from Vue.

Should I...?

This is the point where I start rambling about things...
VueJS and jQuery both have a similar purpose, making it easier to handle your HTML documents. jQuery let's you manipulate the DOM directly, locating tags using css selectors and all the things we already know. You will end up with a lot of code and HTML mixed up in your JS file.
VueJS uses a completely different aproach to the same task.
Rather than proactively editing your HTML like you would do, the HTML reacts to your code - one could say.
To explain what I mean, I will use the example above, our modal window, to illustrate how I think Vue should be used and why I, personally, prefer not to use it with Bootstrap and jQuery.
As we saw above, when a user clicks on the button, we essentially tell jQuery to actively toggle the display of the modal window (it also adds the backdrop - DOM manipulation). So we are telling jQuery to handle all the DOM for us.
In my perfect world, I would have the click change some data-value and let the dom react to that accordingly; Let's see a simplified example to avoid you reading tons of code:

<template>
    <!-- Our button -->
    <button type="button" class="btn btn-primary btn-lg" v-on:click="toggleModal()">
    <!-- Fake modal -->
    <div class="FAKEMODAL" v-if="modalOpen">
        <h1>Hello Fake Modal</h1>
        <button v-on:click="toggleModal()">CLOSE ME</button>
    </div>
</template>
<script>
    export default {
        name: 'MySecondComponent',
        data () {
            return {
                modalOpen: false
            }
        },
        methods: {
            toggleModal() {
                this.modalOpen = !this.modalOpen
            },
            someOtherArbitraryMethod(){
                // do something that requires to show
                // our modal friend
                this.modalOpen = true
            }
        }
    }
</script>

As we can see here, just by looking at the template, it is much clearer to see what is going on. We have our button, whith toggleModal().
We have a modal, with a v-if="modalOpen" which reads in english as: if modalOpen is true, show this block of html.

If we look at our script, we have our data-value: modalOpen - which starts off as false - which means that the modal is not visible.
We have our "toggleModal()" method which basically toggles the modalOpen data-value, causing our template to react.
As you can see, I created a second method, someOtherArbitraryMethod() which could be anything you imagine, some ajax call that opens the modal in case of an error, some method called based on a user input, pretty much anything you can imagine.

I hope you can see the difference in aproaches in this over simplified example. I could go into things like performance, but as it is not my area of expertise, I decided to keep things more conceptual.

Finally, I won't go into this with code examples, but, one of the things people argue for the use of jQuery is animation. They say modals in jQuery fade in, and Vue they don't, yada yada yada... Vue has a couple of animation things inbuilt. Here is a link to the docs... it's a no brainer to use, and you can get effects very similar(if not identical) as you would with jQuery.
https://vuejs.org/v2/guide/transitions.html

Well, that's it I guess.

Gregory Brown

Gregory Brown

Baker, cake designer, cook and just by chance, a full featured developer that is passionate about technology.

Read More