Awwwards
3 Reasons to Love Vue.js's Hero Image

3 Reasons to Love Vue.js

It's no secret that we're huge fans of Vue.js here at Metric Loop. We've used Vue to develop our organization management product Helix, and quite frankly I don't think we could have built Helix without it. There are hundreds of reasons why Vue has been such a fantastic framework for us. We've pared that list down to our top three reasons so you can see how awesome Vue is too.

1) Event Handling

Before we made the switch to Vue, we used jQuery like everyone else. jQuery is an awesome powerhouse that's so ubiquitous I think we've all forgotten that $('#id') isn't actually vanilla JavaScript.

Building an interactive UI with jQuery is certainly doable, but after a while it gets tedious to wire up all of those event listeners to every action in your DOM. First, you've got to make sure the page has loaded. Then, you'll need to give all of your DOM elements unique ids to reference from your JS. Now, you've got to bind an event listener to each DOM element, and then write the actual function you want to fire. My fingers are starting to hurt just writing about it all of the steps.

With Vue, handling events is a piece of cake. All you have to do is add an @click="methodYouWantToTrigger" to your DOM element and Vue takes care of the rest. If you want to watch for other events, that's simple too. For a change event, just replace @click with @change. What if you need to have a Shift Click? Well that's easy, it's just @click.shift. The list goes on and on, but Vue makes it easy to spend less time wiring up events and more time focusing on what those events are triggering.

2) Components

Like every good developer, we try and keep our code as DRY as possible. With its component system, Vue makes it super simple to write reusable, encapsulated snippets of HTML, CSS, and JS that all live in one file. This lets us focus on writing components that solve a repeatable issue that we can then use as a building block throughout our application. For example, if you want to build a simple todo list then you're really talking about two components: the list and the tasks. With Vue you can keep the code and logic for both components separated from each other and use props or a state management tool like Vuex to ensure that your data is being consumed correctly.

If you're coming from the world of React, this is a familiar idea to you. But, if you haven't tried a "modern" framework yet, this probably seems like we're committing a grave sin by throwing out the separation of concerns. I was in the same camp too when I started using Vue. But I quickly warmed to the idea when I realized that my concerns are still separated. HTML is still the structure, CSS handles the appearance, and JS takes care of the functionality. Having them all in one file doesn't invalidate the separation of concerns, it just makes your life easier because instead of flipping through at least three files to get a feature built you can do it all in one.

3) Computed Properties

Lastly, our favorite part of Vue has to be the computed properties. Since Vue is a reactive, data-driven framework, we often rely on computed properties to help us transform our data based on the state of our application. Going back to our todo list, if we wanted to show completed tasks we'd use a computed property. So our computed property would reference the original data and return the set filtered by the task's status, like this:

<script>
var vm = new Vue({
  el: '#example',
  data: {
    tasks: [
    	{task: 'Write awesome Vue post', status: 'done'},
    	{task: 'Share post on Twitter', status: 'pending'},
    ]
  },
  computed: {
    finshedTasks: function () {
      return this.tasks.filter(function(task) {
      		return task.status == 'done';
      });
    }
  }
})
</script>

As you can see, computed properties make it so easy to manipulate and transform our data based on the needs of your app. Plus, since computed properties are reactive, if tasks ever gets updated, then finishedTasks will rerender so you'll always be up-to-date.

The Takeaway

We love Vue because it makes our lives so much easier. Using Vue's Event Handling, Components, and Computed Properties saves us so much time and effort, and that's just the tip of the iceberg! If you're looking to get started with Vue, I recommend taking a look at the Vue Docs so you can see for yourself what Vue can do. Otherwise check out our other Vue blog posts to see examples of Vue in action. Until next time, happy coding!


Nick Basile's Profile Picture

Nick Basile


Lead UI/UX Engineer

Nick is the Lead UI/UX Engineer at Metric Loop. He lives in Austin, TX and spends his free time taking long strolls on South Lamar. If you see him, be sure to honk.