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!
See it working in this JS Bin.
jQuery UI Datepicker
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.