Hot to iteratively migrate from jQuery to Vue.js

September 19, 2019, at 05:00 AM


I do work on project which has a lot of legacy jQuery code and in the team we feel the need to transition to something more evolved.

I am BE developer with some practical experience in Angular / React / Vue.js. Currently I am helping both FE and BE developers to work in more systematic way and move forward.

Mostly mentioned framework in our team is Vue.js, hence a lot of examples and presumptions will be around this framework.

We probably won't have space to rewrite the whole thing at once, hence the "iteratively migrate" in title. There is pretty often a bug discovered in the legacy code written in jQuery, which is opportunity to replace the old buggy places with a new component.

UI is made as Ruby on Rails views with help of jQuery in user-interaction-heavy parts of the UI.



Today I found 60 line function which is just marking checkboxes on page (un)checked, based on what came from backend. The code is written specifically for one part of UI.

I guess this can be easily achieved via Axios and list rendering.


Lot of places in UI is missing URLs. I guess that's because somebody would have to write tooling for routing. I guess this is solved by Router


Let's say there are three lists of checkboxes, next to each other and I would want to write a component for the first list and leave the rest of them as it is. The places in Vue.js need to communicate somehow with the legacy parts still written in jQuery.


Is I mentioned earlier, we won't be able to rewrite it all at once, so…

What are the best practices / common ways for the transition period?

Would it be events? Is there some bridging pattern for these cases? Is there some level at which we should be rewriting — "Always rewrite one page at once" / "Always rewrite things around one backend request at once" / "Always rewrite one whole feature at once" / "Always rewrite what seemingly could be one component"?

Iterate through a table and get the value in core using jquery

Iterate through a table and get the value in core using jquery

I am trying to iterate through a table to get the input valueHow can I do that ?

Codeigniter input library not recognising ajax post data

Codeigniter input library not recognising ajax post data

I am trying to build a file manager with CodeIgniter and bootstrap modal (as my popup for the file manager on a button click) where I list folders and files from a directoryAlthough the first load of the modal loaded the subfolders and files of the specific...