Migrating from Angular to VueJS

Today I ended up with a solution to migrate from a Angular 1 application to VueJS.

First: Context

I work for a startup with a strategy platform written with Angular 1 frontend framework.
After Google deprecated the version 1, the company still continued to use Angular v1, and after some problems, they decided to migrate to VueJS.

The biggest problem is: HOW?

Some options are:

A. Freeze the company and migrate EVERYTHING

I mean, create a version by rewriting the entire platform with VueJS.
Not cool, even if you have a small team and a lot of business logic.
And freeze, because if 4 of 5 in your team develops new features in the legacy way, your migration NEVER ENDS.

B. Create master pages with the new code

This look like more easy and self contained. If you have a link to another module, just redirect the user to a new page written with Vue. But… If you want to rewrite a module, you need to do it entirely. And then, it gets bigger as the first one.

C. Use Vue instances inside a Angular controller

And reuse VueJS components in that instance.
We could start writing new Vue modules inside Angular reusing Vue components. And one day… we kill Angular.

Yep. We choose C.

How it works?

Well, I build another project with a bunch of components to be reused, and I make Webpack generates a library JS to be imported in the Angular project.

One thing to remember: we don’t have a builder on the Angular project. Everything is imported with script tags, in a old school way.

So, I had to create a lib with all components. I explain in another post how to do that with Webpack.

After importing the lib, I use VueJS to manage a specific DOM node inside a Angular controller.

Let’s do it!.

Components Library

Like I said, I’ll explain it later with more details. But, Let’s say I have a lib.js with some VueJS components and import it on the index.html

Ok, now I have a Vue with a bunch of components. How to use it with Angular?

Integrating Angular and VueJS

Let’s say you have this “application”:

And now you want to change to VueJS.

You could simply do:

Notice that:

1. I put a new div with id v-ctrl inside the ng-controller. That is the new template for VueJS instance.
2. Now inside the template, I use VueJS directives.
3. I create a Vue instance (new Vue()) inside Angular controller, passing a #v-ctrl id to the options (could be any id).
4. And I use a VueJS component declared before.

And THAT WORKED!

So now, on every controller you can instantiate a VueJS instance and use new components with a new framework.

When all controller and modules are migrated, you can change Angular easily to a completely VueJS project.

Last words

I now this is a simple example and I have a lot of other things to deal with, like:

1. Routing
2. State Management
3. HTTP Requests
4. User Authentication
5. Shared Components

But it is a start, right?

In another post, I’ll try to explain how I deal with shared components, creating, building and using them in all VueJS projects and Angular legacy projects.

Please, share your experiences with these kind of migration and ask anything you want in the comments.

Bye.