Why it's time to use Vue.js?

John Au-Yeung - Feb 25 '20 - - Dev Community

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

Vue is one of the easiest front end frameworks to start building UIs with. Here's why we should starting using Vue for our front end apps.

Easy to Get Started

It can be used with a script tag or we can also use the Vue CLI to build a web UI.

This means that it's suitable for quick prototypes, enhancing legacy apps, and full production apps alike.

Vue libraries can also be included with a script tag, so we can use them without any build step. This is something that's unique to Vue. There're any other popular frameworks that can use libraries included from a script tag.

For instance, the following is a very simple Vue app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{name}}</div>
    <script>
      new Vue({
        el: "#app",
        data: {
          name: "James"
        }
      });
    </script>
  </body>
</html>

As we can see, it's amazing how simple it is. We just include Vue with a script tag in the head and then we add another script tag to instantiate Vue. Then we got our own Vue app.

Routing and State Management are Covered by Official Libraries

Vue Router is the official routing solution and it's included as an option when we run the Vue CLI to create an app.

This is the same as the Vuex state management library.

With those, we got the most important parts of a single-page front end app covered. We don't have to decide on which libraries to use ourselves, which saves us lots of time and headaches.

Fast Rendering

Vue has the virtual DOM which makes rendering fast since Vue diffs the old DOM with the one that it's going to render and make incremental changes based on the old DOM.

The Vue library with Vue Router and Vuex is only 30KB gzipped. This means that apps load faster and more speed for users.

Big Ecosystem

The ecosystem is also good as more teams are using it for their production apps. Lots of Stack Overflow questions are being asked and answered. Also, lots of libraries like Material Design libraries and Bootstrap are made for it. There's also a big list of other libraries made for Vue here.

Creating an app will take no time with all this support.

Conclusion

Vue is a very good front end framework that takes the deficiencies of other front end frameworks and libraries and made them better. The ecosystem is also big that there're people that'll answer questions and libraries to help us do anything.

As a result, it's a great framework to start building UIs today.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player