Saving an AngularJS app with Vue

yes, there are still applications developed with AngularJS even though its LTS version was discontinued at the end of 2021, in fact from the beginning of the year 2022 the independent team in XLTS.dev will maintain a fork of the latest version of AngularJS. by default the only way to migrate your web app is using some libraries available by the Angular team,

Why Vue?

Vue offer a natural way to migrate your ng components to Vue components because there are some features that will speed up the whole migration process of your app, for example templating syntax and reactive model.

This allows migration to be less complex for the team and allows them to still focus on new features and migration at the same time.

let me show you a basic example to make this...

Setting up AngularJS with Vue

Add Vue snippet

include Vue/Vuex snippet from your favorite CDN

<script url=".../vue.js"></script>
<script url=".../vuex.js"></script>

Creating Vue instance

we create a Vue instance in main or some view controller!

((module) => {
  const vm = this;

  vm.$onInit = () => {
    vm.ngText = 'Hello World!';
    vm.vueInstance();
  }
  vm.vueInstance = () => {
    new Vue({
      el: document.getElementById('vue-app'),
      data:{
        someText: vm.ngText
      }
    });
  };
})(angular.module('app'))

Create a simple Vue component for this example

we declare this component in constant in case we need to run unit tests

const MyVueComponent = Vue.component('MyVueComponent', {
  computed: {
    text: {
      type: String
    }
  },
  template:`<div>{{ text }}</div>`
});

Finally inside HTML template ng-non-bindable does the trick, this directive tells AngularJS not to compile or bind the contents of the current DOM element, in our case a Vue instance

<main ng-controller="MainCtrl as vm">
  <div id="vue-app" ng-non-bindable>
    <MyVueComponent :text="someText" />
  </div>
</main>

now you can migrate and deliver new features at the same time with Vue.
you can check a full example using Vue and incorporate Vuex.

rholo / ng-vue-migration

Basic sample to migrate from AngularJS to Vue without modules

Migrate AngularJS app with Vue/Vuex

this is an example to migrate your legacy project from angularjs to Vue including Vuex and i18n features,

NOTE: this project is not using javascript modules

this migration is from angularJS inside to create new features using Vue..

even you can add Eslint + Prettier config for better practices and clean code.

View on GitHub