Vue.js
Oct
10
2019

What is Vue.js?

Vue.js is progressive javascript framework to build user interface. It is one of the most popular frameworks for simplifying web development. Vue mostly works with presentation layer. Vue is focus on view part. Vue.js development is also capable of powering Single Page Application when used in combination with the modern tooling and support libraries. It is easy to integrate with big projects for frontend development.

Vue.js was created by former employee of google Evan You. First released take place on february 2014. The number of stars in its github rating exceeded 65,000, which indicates extraordinary popularity of Vue.js.

The installation of Vue is easy to start with. Any developer can easily understand and build interactive web interfaces in a matter of time.

Installation

Prerequisite
Installed NPM into your PC or laptop.

Release Notes

Stable release 2.6.10 (when blog is written).
Detailed release notes for each version are available on GitHub.

There are three ways to install Vue.js

1) Direct <script> include
Simply download and include with script tag. Vue is registered as global variable.

CDN
For prototyping or learning purposes, you can use the latest version with:


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

If you are using native ES Modules, there is also an ES Modules compatible build:


<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>

You can browse the source of the NPM package at cdn.jsdelivr.net/npm/vue.

2) NPM
NPM is recommended when developing large scale application.


#stable version
$ npm install vue

3) CLI
Just download file from the link below and include that file into your project one folder. And require that folder by using script tag where you want Vue.js implement. Now you can use it in your project.

This is used for implementing Vue.js in existing project.

In the dist/ directory of the NPM package you will find many different builds of Vue.js. Here’s an overview of the difference between them:

UMD CommonJS ES Module (for bundlers) ES Module (for browsers)
Full vue.js vue.common.js vue.esm.js vue.esm.browser.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Full (production) vue.min.js vue.esm.browser.min.js
Runtime-only (production) vue.runtime.min.js

Advantages

1) Very Small Size
The success of Javascript framework is depends on its size. The smaller the size is, the more it will be used. One of the greatest advantages of Vue.js is its small size. The size of this framework is 18-21KB and it takes no time for user to download and use it. This does not mean that it has a low speed because of its small size. Instead, it beat all bulky frameworks like React.js, Angular.js and Ember.js.

2) Flexibility
A deal with flexibility is another advantage of Vue.js. It allows the user to write template in HTML file, javascript file and pure javascript file using virtual nodes. This flexibility also makes it easy to understand for the developer of React.js and Angular.js and any new other javascript framework.

3) Simplistic approach
One of the reasons for the popularity of this framework is easy to understand. The user can easily add Vue.js in existing project because of its simple structure. They don’t even need to know much about JSX, ES2015. Those who are familiar with HTML and javascript can fetch a lot about framework and get started quickly. This is what makes Vue.js more advantageous for a fast paced development environment and makes it very easy to make it shift.

4) Focus
Vue is a relatively fresh framework and has very less baggage. This minimalism and absence of pedigree in its framework is one of its strongest attributes. Thanks to which vue has a rather narrow use case. This focus lets vue to ignore the bloat of other frameworks. The minimal surface areas of its APIs enables developers to channelize all of their efforts on improvement rather than maintenance.

5) Detailed documentation
Developers always like to use the framework with detailed documentation because it is always easy for them to write their first application. The documentation with Vue.js is so comprehensive that any user who knows a little about JavaScript and HTML can develop his own application or web page.

6) Reactivity
It means at every point, when the variables change, it will automatically inform their peers. This is where variables in Vue.js are reactive.

7) Copying Competitors
Vue.js comes with what had already been efficient from other frameworks, indeed it copies what works in other frameworks and what doesn’t. As already been stated, (which is a flux-inspired library for state management) was inspired from Elm. Along with this, Vue’s components get the similarities with Polymer’s custom elements.

8) Two-way Communication
Vue.js facilitates two way communication because of its Model–view–viewmodel(MVVM) architecture which makes it quite easy to handle HTML blocks. In this respect, it seems very close to Angular.js which also speed up HTML blocks.

Disadvantages

Following are the disadvantages of using Vue.js technology in web development.

1) A closed community development
Unlike other frameworks, Vue doesn’t yet have the widespread support of its fellow frameworks as it is not as popular as React or Angular 2 & 4. There are far more resources for React.js than Vue.js.

2) Lack of Support for Large Projects
Vue.js is relatively new language, which is not supported by a large community of active programmers.similarly, the development team of Vue.js is also small, which means that the platform will need some time to get corporate backing. As of 2018, the development of the framework is not tied to corporate interests; therefore, any changes to the existing framework are mostly depended on the feedback of community members.

3) Being too flexible can be problematic
Sometimes, flexibility can cause some issues for the developers. Vue.js might have while integrating into huge projects and there is still no experience with possible solutions, but soon they will definitely come soon.

4) Future Contenders
A small development team means that the lack of active research may provide opportunity to fresh framework to catch the interest of community. This affects development to become slow or even stagnate. Such threats are valid as major corporations such as Google and Facebook are actively involved in the development of similar concepts.

5) Language Barriers
The creator of this framework is Chinese-American and is very supportive of Chinese development community. A major users are non-English speaking communities which are perhaps one of the biggest issues with this framework.As such, there seems to be lots of support for the Chinese development community as compared to others.
Overall, Vue.js is a powerful framework for developing user interface.its small size and customisation features make it a solid choice for developers and It is user-friendly framework for web development. Most of the drawbacks of Vue.js can be rectified easily keeping developers optimistic that this framework will continue to improve in the future.