DEV Community

Cover image for Saving an AngularJS app with Vue
Rodrigo Ahumada
Rodrigo Ahumada

Posted on • Updated on

 

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.

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.