VueJS The Emerging Trend
Published: 2023-02-25 22:35:46

Software Development is one of the most trendiest careers in this time of age, with more and more people becoming curious there is also more and more frameworks being introduced to the software industry at the moment. With these new frameworks developers are looking for what framework is best out of all of them? In this blog, I will write about a very popular JavaScript framework called Vue.js and go through a few of its features, how to start a project, the pros/cons, and about its component reusability.


### Introduction

VueJS is a cutting-edge and adaptable JavaScript framework that enables the development of page applications and user interfaces. Created by Evan You in 2014 VueJS has become one of the most popular web development frameworks in the world.


## What is it?

VueJS was created to allow developers to create web applications more easily, specializing in single-page applications and building user interfaces. With its lightweight and flexible framework, it allows developers to use only the parts that are needed for their application. It has a reactive data binding system, which shows the changes made in the data are automatically reflected in the user interface. 


## Features of VueJS

**1. Virtual DOM:** a virtual DOM is a lightweight JavaScript representation of the Document Object Model(DOM). Virtual DOM is a feature used in VueJS which is used by other frameworks like React, Ember, etc. When changes are made they are not instantly changed in the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structure. When the final changes are made this is then compared to the original data structure. It is then updated to the real DOM which the user will see the change.

**2. Data Binding:** This feature helps manipulate or assign values to HTML attributes, change the style, and assign classes with the help of binding directives called v-bind.

**3. Component-based architecture:** This feature makes it so that it is easier to create reusable pieces of code.

**4. Reactive data binding:** This feature allows changes in the data to be automatically reflected in the user interface.

**5. Directives:** This feature has Vue.js have built-in directives that allow developers to add dynamic behaviors to the user interface.

**6. Templating:**  This feature allows VueJS to bind values from the model into the view. This can be achieved using simple HTML bindings.

These are just a few features that VueJS has to offer.


## Pros of VueJS

**Tiny Size:** One pro of VueJS is that the framework only weighs 18KB since its small it's also a fast install and doesn't take a lot of space.

**Virtual DOM:** As said above as one of the features the Virtual DOM is one of the best reasons why VueJS is such a good Javascript framework.

**Single-file components and readability:** One of the biggest pros in  VueJS is how you can turn HTML, CSS, and JavaScript files into components, the code is easier to read and understand, which makes it easier to fix and maintain.


## Cons of VueJS

**Lack of support for large-scale projects:** Since VueJS community and development team is not that big compared to other frameworks like Angular or React it mainly focuses on relatively small projects.

**Over Flexibility:** VueJS offers a lot of flexibility in creating projects. This might lead to your team having too many options and developers not matching in programming so communication and rules should be talked about in a regular basis.

**Lack of experience in the field:** VueJS is relatively new in the software industry and is still gaining popularity. So finding help and seeing others work will require more searching and time compared to other JavaScript frameworks.


## How to start

First of all you will need Node.js installed on your computer, since the libraries required for VueJS are downloaded using the node package manager. Node.js is a JavaScript runtime that allows you to run JavaScript on the server.

Once Node.js is installed, make sure to run the following command in the Command Prompt not on NodeJS.

`npm init vue@latest`

This command will install and execute create-vue a Vue project scaffolding tool. This will take you a through several optional features like TypeScript and testing.

![VueJS npm creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9ui7s64txwxo5lm63ps.png)

If you are unsure about a feature just select, No.

**To create a new project (CLI), run:**

`vue create hello-world`

Use the Vue CLI to create a new Vue.js project. Vue CLI is a command-line interface that allows you to create  new projects, plugins and dependencies.

This command should also create a new project called "hello-world" in your current directory. You will then be prompted to pick a preset, You can either choose the default preset which comes with a basic Babel + ESLint setup, or select "Manually select features" to pick the features you need.


## Components Basics

Components in VueJS allow for the user interface to be made into reusable independent pieces. Vue allows you to encapsulate custom content and logic in each component.

![Component Image Low Fidelty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klanexnl4edhfy9m1prw.png)

The image above is an example of how parts of a page can be associated as components in VueJS.

**Vue.js Component Example:**

```
Vue.component('hello-world', {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello, world!'
    }
  }
})
```

The code block above shows a component called "hello-world". This component has a template that defines the structure of the user interface. The code shows a HTML 'div' tag that will display the value of the 'message' property. You can assign the contents of the 'message' with the 'data: function' and returns an object 'message' and display the content of the 'message' property. 


## Conclusion

Overall this blog post shows what VueJS has to offer as a JavaScript framework. I wrote about just some of the features the framework has to offer. It also shows a simple way to create a project, Just make sure you have the latest version of NodeJS installed. VueJS also has the component-based feature where you can write code blocks that are reusable and maintainable. So going back to the question asked in the introduction, there is no such thing as the number 1 JavaScript framework. It all depends on what the developer is most comfortable with, so have a try at the upcoming JavaScript framework called VueJS.