In case you’ve never heard or used Vue.js before, you are probably thinking: Come on! yet another JavaScript framework! We get it. However, Vue.js is not new. It was first released in 2013 and now it has 40300 starts on Github and downloaded number of times this year! Hence, neither Vue.js is new nor less popular from other frameworks as per it’s lifetime. Now let’s see what are the winning factors present in Vue.js.

Why is Vue.js Special?

The greatest benefit of Vue is it’s absence of pedigree. It is fresh and has little baggage. It has been learning from the mistakes and successes of Angular. The way we see it, Vue is lightweight & easy to learn. It has got some fairly basic docs but they do a good job, and while there isn’t a great deal to learn compared to angular – this is a good thing as it’s deceptively powerful. PageKit, Python China are two of of the projects using Vue among many. Here’s the list. Also, it has two way data binding facility like Angular and Virtual DOM like React. Now, we hope your basic concept about Vue.js is quite clear. Hence, lets compare it with Angular

Angular vs Vue.js

While comparing these two, let us first declare that Angular (mostly after the release of Angular 2) is a mammoth and Vue.js is the tiger hungry enough to become big soon. However, there are many reasons for which developers are switching to Vue. Evan You, the owner of Vue describes the reason rightly:

Vue.js is a more flexible, less opinionated solution ( than Angular ). That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages instead of a full blown SPA.

Now lets see few codes which will give you some basic insights:

Modules

Angular:

angular.module('mymodule', [ ... ])

Vue.js

Vue.extend({
  data () { return { ... } },
  computed: { ... },
  created () { ... },
  mounted () { ... },
  components: { ... },
  methods: { ... },
  watch: { ... }
})

Directives

Angular:

myModule.directive('mydirective', (injectables) {
  return {
    restrict: '',
    template: '',
    controller () { ... },
    compile () { ... },
    link () { ... }
    // other props omitted
  }
})

Vue.js:

Vue.directive('my-directive', {
  bind () { ... },
  update (newValue, oldValue) { ... },
  unbind () { ... }
});

Filters

Angular:

myModule.angular.module('myfilter', [])
  .filter('reverse', () => {
    return function (input) { ... }
  })

Vue.js

Vue.filter('reverse', (value) => {
  return function (value) { ... }
})

Because Vue will only help us manage the VM, it won’t tackle some of the challenges that Angular covers out of the box. Services / HTTP request, routing, promises (just to name a few) are not among Vue’s concerns. That’s good and bad. Perhaps “bad” is an exaggeration; but it’s a negative aspect for someone that got used to Angular and didn’t have to lift a finger for it. In other words, we have to mix and match libraries as we go to cover our needs. That can be quite a task, but some developers love having this kind of control (others think it’s a waste of time). However, once you find a few good libraries, you won’t have to do it again. I think this kind of flexibility is very empowering. Imagine building your own smaller, focused framework (like Angular) on top of a good foundation: Vue.

Creating a personalized front-end stack is great fun too. The first stack I ended up with was made out of: Director (routing), Request (you guessed it), Q (promises) and of course Vue. The best name I can make out of these is QRVD (kinda sounds like curved). For the rest of the article you could have this stack in mind, although it won’t change much if you don’t.

Interpolation

Angular:

{{ myVariable }}

Vue.js:

{{ myVariable }}

Model binding

Angular:

<input type="text" ng-model="myVar">
<p ng-bind="myVar"></p>

Vue.js:

<input type="text" v-model="myVar">
<p v-text="myVar"></p>

Loops

Angular:

<li ng-repeat="item in items" class="item-{{$index}}">
  {{ item.myProperty }}
</li>

Vue.js:

<li v-for="(item, index) items" :class="'item-'+index">
  {{ item.myProperty }}
</li>

Conditionals

Angular:

<div ng-if="myVar"></div>
<div ng-show="myVar"></div>

Vue.js:

<div v-if="myVar"></div>
<div v-show="myVar"></div>

Conditional Classes

Angular:

<div ng-class="{active: myVar}"></div>

Vue.js:

<div :class="{active: myVar}"></div>

Event Binding

Angular:

<div ng-click="myMethod($event)"></div>

Vue.js:

<div @click="myMethod($event)"></div>

The list goes on. There’s even a v-cloak directive that hides the bindings before they are rendered (as ng-cloak does).

However, there’s one directive that you won’t find in Angular: v-with. Attaching this directive and passing a data object will allow a child VM to inherit data from his parent. In my first encounter, I though of it as a drastically simplified Angular Controller, managing the data flow across the application (without the need of an equivalent to $scope. By default, components will have an isolated scope. That makes this directive essential, although components also accept inherit as a property (see more on scope slots).

Bottom Line

There are many tools in Angular and so many complex syntax that it can confuse you sometimes. On the other hand, Vue.js is much simpler than Angular and sometimes even better. If you are concerned about the future of this framework, we suggest not to be. This is going to stay for long and no way to fade in upcoming two years.

In today’s time Vue is not as popular as Angular 2 (supported by Google). However, many developers are switching to Vue. Laravel community has also considered it as one of their preferred front-end frameworks.

Overall, Vue provides an answer to the issue of React & Angular and gives you much simpler and easier way to code.

If you have something to ask or you have another perspective to share with me, please leave a comment below! Happy code!