Why You Should Use VueJS

In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects, when there is a need to write frontend applications, I always used Vue. I just love using Vue.

From VueJS Official Site

Why? Well, first of all, I'm not hardcore enough to learn many things just for a simple project. I want simplicity. So for this reason, I excluded Angular. Now it comes down to React and Vue. Here comes my second reason: I love Vue syntax.

First of all, the file structure is quite simple yet separated beautifully. If you never touched Vue before, here is a snippet of basic Vue syntax

**<template>**
  <h1>Hello {{name}}</h1>
**</template>
<script>**
export default {
  data() {
    return {
      name: 'Adyaksa',
    }
  }
}
**</script>
<style>**
h1 {
  color: red;
}
**</style>**

So Vue file structure is divided into 3 sections: template, script, and style. The combination will form a Vue Component. The template is where the HTML structure is described. All heavy lifting is placed in the script section, where we can put all normal frontend scripts here in addition to Vue-specific scripts such as component lifecycle. And then the last section is where we put our CSS for the code.

One thing that I have experienced when using React is that when your team doesn't have a clear formatting guideline, it's harder to find specific code that you need. Moreover, when you have many components with their own specific styling, you will have an enormous number of files that you have. But when we're using Vue, all the HTML, CSS, and JS are combined in 1 class with a specific order that is already defined. Because of this, we know where each section is located in the file and we have an easier time finding what we need. This is also described in Vue docs: "What About Separation of Concerns?"

And then the second one is what makes creating HTML in Vue fun: Directives. Imagine that you want to create a list based on value from array arrayList . You can easily do it by adding v-for directives like this:

<li **v-for="item in arrayList"**> {{ item }} </li>

Hey, what's so fun about it? Well, imagine that you want to create something more complex such as displaying the ranking of an item with its attributes. By using this, we can just add v-for directives to easily access all the attributes of the item. And there are many more neat directives such as v-if, v-show, v-model etc.

But it's not all fun and game. Like all languages, VueJS readability would suffer at a more complex project. Its code structure also doesn't help, with every bit of code stuffed in a file. But still, I think this is a small price to use this fun language.

Hello, I'm Adyaksa, and I write about software development and my language learning experience. I'm planning to release a weekly blog about something that I find interesting while working on my side projects. If you're interested, you can follow me to keep updated about it!