What is Vue?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

From the definition provided by Vue's official website, VueJs is one of the top 3 Font-End Frameworks out there alongside React and Angular.

Choosing a framework is just a pesonal preference towards building amazing Front-End websites. To me, I was on the side of using Angular back in 2018 and 2019 when I didn't know much about Vue and how popular Vue would get till I graduated from university. I started with Angular from my mentor who gave me an insight towards what web development actually really means, and taught me the basics during my internship experiences.

What's the drive in moving from Angular to Vue?

A little introduction to Angular

I wouldn't lie, if I were to say that my passion towards Front-End development was very shallow during uni days, as I was cramped up with assignments and all those. I dedicated my available time that I had for a small side project that I spent 2 years in learning about the fundamentals and how web are bundled in Angular while learning in depth, experimenting and trying new things that tie between Back-End and Front-End together.

As I started learning more, I found out that concatenating server code and client side makes the bundled size too big and that at the time that I did decide to host this project, it complicates stuff where hosting on the server was the only option. Without much knowledge and little knowledge prior to hosting, I wanted to be better in using Git and learning how to host projects.

Comparing the time back then and now that I hosted my projects on a serverless service - CloudFlare Worker, by separating client and server code. This pathway helped cleared

What Vue offers

As of writing, Vue2 is currently the most popular and Vue3 is on the verge to being the next gen for developer to use. Although there are already a support for Vue3 for people who want to try out (such as Vite or by using Composition API), the idea for developers is to use Vue2 since the only major difference between Vue2 and Vue3 is that Vue3 needs individual importing for any libraries we need.

Example snippet for use of Composition API in Vue3 - Reference

<script>
import { ref } from '@vue/composition-api';
export default {
    name: 'AddComposition',
    setup() {
        let num1 = ref(0);
        let num2 = ref(0);
        let sum = ref(0);
        function addNumbers() {
            sum.value = parseInt(num1.value) + parseInt(num2.value);
        }
        return {
            num1,
            num2,
            sum,
            addNumbers
        }
    }
}
</script>

The following snippet makes use of reactive data, which in this case is the use of ref and that this means exactly the same as:

Example snippet for use of Vue2 definitions

<script>
import { ref } from '@vue/composition-api';
export default {
    name: 'Add',
    data: function() {
      return{
        num1: 0;
        num2: 0;
        sum: 0;
      }
    },
    methods: {
      addNumbers(){
        this.sum = this.num1 + num2;
      }
    }
}
</script>

As we can see here, there is a major difference in how language had transversed. With Composition API, it introduces to use the use of ref/reactive which is how we use data function in Vue2.

Ending note

We can see how much difference Vue3 is different from Vue2 and some of the many reasoning is:

• Better code quality
• Switch to using the Virtual DOM for overall performance improvements
• Conversion to TypeScript to improve type inference for TypeScript users
• Improve tree-shaking for Vue users using WebPack (or similar solutions)