Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it.

But you're probably reading this not because you want to use jQuery and Vue together, but because you have to. Perhaps a client is insisting on using a particular jQuery plugin that you won't have time to rewrite for Vue.

If you're careful about how you do it, you can use jQuery and Vue together safely. In this article, I'm going to demonstrate how to add the jQuery UI Datepicker plugin to a Vue project.

And just to show off a bit, I'm even going to send data between this jQuery plugin and Vue!

The Problem With Using jQuery and Vue Together

Why is doing this potentially hazardous?

Vue is a jealous library in the sense that you must let it completely own the patch of DOM that you give it (defined by what you pass to el). If jQuery makes a change to an element that Vue is managing, say, adds a class to something, Vue won't be aware of the change and is going to go right ahead and overwrite it in the next update cycle.

Solution: Use a Component as a Wrapper

Knowing that Vue and jQuery are never going to share part of the DOM, we have to tell Vue to cordon off an area and give it over to jQuery.

Using a component to wrap a jQuery plugin seems like the way to go because:

We can utilize lifecycle hooks for setup and teardown of the jQuery code.

We can use the component interface to communicate with the rest of the Vue app via props and events.

Components can opt-out of updates with v-once

Set-Up jQuery UI Datepicker

Obviously, you need to include both the jQuery and jQuery UI libraries in your project first. Once you have those, the datepicker just requires an input element to attach itself to:

Date: <input id="datepicker"/>

It can then be instantiated by selecting it and calling the method:

$('#datepicker').datepicker();

Datepicker Component

To make our datepicker component, the template will be this one input element:

Teardown

To teardown the datepicker we can follow a similar approach and use a lifecycle hook. Note that we must use beforeDestroy to ensure our input is still in the DOM and thus can be selected (it's undefined in the destroy hook).

Since the dateFormat prop is a dependency of the datepicker component's mounted hook, updating it would trigger the component to re-render. This would not be cool. jQuery has already set up your datepicker on the input and is now managing it with its own custom classes and event listeners. An update of the component would result in the input being replaced and thus jQuery's setup would be instantly reset.

We need to make it so that reactive data can't trigger an update in this component.

v-once

The v-once directive is used to cache a component in the case that it has a lot of static content. This in effect makes the component opt-out from updates.

This is actually perfect to use on our plugin component, as it will effectively make Vue ignore it. This gives us some confidence that jQuery is going to have unhampered control over this element during the lifecycle of the app.