Why Vue.js is a great choice for front end development

I've been using Vue.js for front end development for about a year and a half, and think it's great. After tackling both small and large projects, I have no reservations in recommending it. In this article I'll outline some of the reasons I think it's a solid choice.

Single File Components 👍

The stand out feature of Vue for me is undoubtedly Single File Components (SFCs).

It lets you combine HTML, CSS, and Javascript in a single file. This makes it easy to understand what's going on, instead of having to refer to a bunch of separate files simultaneously.

Here's a simple example:

<template>
<p>Hello {{ name }}</p>
</template>

<script>
export default {
    data: function() {
        return {
            name: "Bob"
        }
    }
}
</script>

<style>
p {
    color: red;
}
</style>

You can use any of the popular CSS preprocessors by modifying the style tag:

<style lang="less">
...
</style>

And even better, you can make it scoped, so the styles only apply to the current component. This was one of the big benefits of the Shadow DOM and Google's Polymer project - Vue gives you this with very little hassle.

<style scoped lang="less">
...
</style>

You then compose your application out of these simple components.

Simple, but powerful templating

I really like the Vue templating language. If you've used something like Django in the past, it feels very natural.

<template>
<ul>
    <li v-for="name in names">{{ name }}</li>
</ul>
</template>

<script>
export default {
    data: function() {
        return {
            names: ["Fred", "Wilma", "Pebbles"]
        }
    }
}
</script>

Beginner friendly

Front end developers come in all shapes and sizes. You can't assume that everyone will feel comfortable with some of the things demanded by other frameworks. Most notably, JSX when using React, and Typescript when using Angular.

I can show any front end dev a Vue SFC and it'll look familiar to them. Fundamentally it's still just Javascript, HTML, and CSS. Vue is a great starting point for someone who does a bit of jQuery, but is looking to develop more complex applications.

Having said that, Vue also scales very well. In combination with the two official sister projects, Vuex and Vue Router, you can develop applications which are as sophisticated as you can imagine.

Wait, not React? 😳

React is the leading framework in terms of industry adoption. A lot of this is to do with the backing of Facebook, which lends it credibility. If you look at job adverts, more will require React than Vue. Even though Vue is the underdog, it's still enormously popular. If you're in the position to pick a framework within your own company, then there's no reason not to consider Vue. People won't struggle to learn it.

However ... learn Vuex

The biggest piece of advice I'd give to someone learning Vue, is to learn Vuex ASAP. Vuex is the data layer in a Vue application, and whilst you can build an app without it, it does make things easier.