How we install Vue.js in jQuery app
When you learn Vue.js, there are so many tutorials in the Internet. I am one of the developers maintaining jQuery code at work. When you finished a couple of the tutorials, and grasped what Vue.js is, you may have this question: “Then, how can I add Vue.js in this jQuery app?”
It is actually pretty simple, if you have started learning Vue.js with vuejs-templates, you know 90% of this. You only need 4 steps!
Step 1: Create a Vue.js component
The component I created is wrapping vue-multiselect. It looks like this:
Any Vue.js component is fine. You can add whatever you have made though tutorials.
Step 2: Add a chunk of JS code as a bridge
From my experience, it’s hard to expect that jQuery code is always super readable. We would like to avoid confusion about how Vue.js is living in jQuery code. The code connects the vast jQuery continent and the Vue.js island.
You can see that props of your Vue.js component is passed via data. Now bind has your Vue component in its function.
Step 3: Add the destination where your Vue.js component lands
There’s only one thing you need to edit: HTML — You must already know how to add Vue.js component in Vue.js app. It’s the same in jQuery app.
Step 4: Add Vue.js component in your jQuery app
Make sure the HTML is rendered before you invoke multiselector.bind(). Easy!
Lastly, if you want to transform your jQuery into Vue.js
If you want to transform your jQuery app into a Vue.js app, there are blog posts by GitLab which might give you some good thoughts. Transforming is so attractive, however it takes tons of time. If you’re working at a startup, you’ll never have that resource. I believe implementing Vue.js in jQuery app bit by bit, then eventually replacing everything with Vue.js if you are eager to do it, is the best strategy. These blog posts explain well.
Happy coding!
