Saving an AngularJS app with Vue

rholo

Rodrigo Ahumada

Posted on February 18, 2022

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

fusion

Add Vue snippet

include Vue/Vuex snippet from your favorite CDN

<script url=".../vue.js"></script>
<script url=".../vuex.js"></script>
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

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>`
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

finish fusion

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.

GitHub logo 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.

💖 💪 🙅 🚩
rholo
Rodrigo Ahumada

Posted on February 18, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Saving an AngularJS app with Vue
javascript Saving an AngularJS app with Vue

February 18, 2022