loading...

Why it's time to use Vue.js?

aumayeung profile image John Au-Yeung ・2 min read

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.

Posted on by:

aumayeung profile

John Au-Yeung

@aumayeung

I'm web developer interested in JavaScript stuff.

Discussion

pic
Editor guide
 

You should really look into canjs.com if you like vue that is vue on steroids.

 

This kinda looks like uglified Svelte to me. Why use this over something more established / standardized?

 

You meant "Vue is integrated from scratch into Laravel". It was not made for Laravel and they are entirely separated projects. This misinformation that Vue comes from somewhere laravel was created makes a lot of newcomers to keep away from vue.

 

Vue is istegrated from scratch with Laravel, as one of the best frameworks to develop any kind of web app. So if you use Laravel for your backend, Vue is your option for the front end

Yea. I don't know why they choose to pair with Laravel. I guess it's the same reason everyone else picked it.

I think is more like Laravel choose to include Vue instead, as the easiest solution to develop a dinamic frontend in a Laravel based app

 

Vue has a bigger community than Svelte.

I agree that they are pretty similar though. Once Svelte have some good libraries made for it then I think we can use it

 

Website canjs.com is down

 

That was temporary. It's working fine now.

 

I use React most of the time because of typescript. It's fantastic to build a typescript react app and VSCode intellisense works just fine without any extension. Vue needs the vetur ext and it doesn't works as expected. Typescript support is bad on vue 2 with all that decorators etc. Looking forward for v3 release.