Migrating Meteor+AngularJS to Meteor+VueJS

I have an application that uses Meteor with AngularJS (1.5.x), and I would like to incrementally migrate that to Meteor with VueJS. That is, I want the ability to use both frameworks simultaneously with Meteor, and transition various components from AngularJS to VueJS as makes sense for the project and available resources (i.e., people to do that work).

I have read about migrating from AngularJS to VueJS in this way without Meteor, but I need to be able to do it with Meteor. Can anyone point me in the right direction? I am not an expert in any of these, but I do use them and am actively learning more about each.

Kevin

1 Like

Hi and welcome to the Meteor forums.

Quite the task you’ve got there!

Now, there is no easy way to achieve what you want, but equally this is an amazing opportunity to learn a few extremely useful things. In what follows, I don’t outline a recipe, but a potential course of action which I would take if I had the same problem.

First, approach it as an architectural challenge, not a technical one. The latter is easy once you figured out the former. Because the routers for each UI library are specialised, you won’t be able to easily (at all?) make both Angular and Vue coexist – others with more knowledge could chip in.

Second, to make the client codebase more manageable, and futureproof (cause the world of frontend frameworks changes by the month), I suggest a micro-frontend approach. See if it’s feasible at all to take something like meta-router and make it work with Meteor’s reactive modules, like Tracker, ReactiveVar, Minimongo, etc, as these ones, I’d expect, could be used in both Angular and Vue.

I suggest taking a good luck at Vulcan’s architecture and reading about its philosophy and patterns – you don’t necessarily need to use Vulcan itself. There’s almost no limit to the modularity which you can achieve with Meteor and the Vulcan architecture. And modularity is your way out of hell.

Thank you for these suggestions.

I had read about Angular and Vue co-existing without Meteor, for example in:
https://medium.com/@graphicbeacon/how-to-use-vue-2-0-components-in-an-angular-application-4d85bacc42dc

and had read about Blaze and Vue coexisting within Meteor here:
https://github.com/meteor-vue/blaze-integration

so I was looking for a similar path for AngularJS and Vue.

I will look at the ideas you suggested. I am beginning to think the shortest path is to just build the Meteor+VueJS separately and forego the incremental migration; although for sure I would learn the most by figuring out a way to do both simultaneously.

Yeah, I’m familiar with the Blaze & Vue Frankenstein’s baby, and even tested it as a potential avenue for converting our own frontend. I consider it an almost decent compromise, but only for the purpose of migrating, and not entirely convinced it works with very complex apps.

I suggested the micro-frontend approach also as a way of fencing against future changes. An architecture like that can in theory hold together dozens of libraries and frameworks.

Good luck!