Getting Up Close and Personal with VueJS

VueJS Logo

Amidst the tug-of-war going on between the most popular JS frameworks Angular and React, I found solace with another kid on the block namely VueJS(pronounced /vjuː/). But this kid is as powerful and plush as the already existing frameworks out there. In fact, the folks at Vue claim it to be more powerful and performant than any other JS framework. Check out this link for more info.

Let’s see how to and why there’s even a need to delve into this yet another UI framework.

Orchestration

It’s very easy to jumpstart on Vue for beginners since the scaffolding is really a breeze when it comes to Vue.

It’s as simple as this

<script src="https://unpkg.com/vue"></script>

Unlike other frameworks out there, it’s really simple to start using Vue. To be specific, I’m talking about Angular in which I honestly don’t bother to learn about another module loader be it SystemJS or rollup with those verbose configurations. While Angular enforces you to use TypeScript and React coerces you to use JSX, Vue inculcates pure web standards like real html, css and JS.

Data Binding

When it comes to data binding, Vue is no less than various plush frameworks out there. It supports all kinds of data and event binding syntaxes and even more. Consider this pug template snippet

And here’s the script for the same

For binding the html attributes and component input properties, you can use the v-bind directive or a shorthand property :attrName while providing a valid JS expression in the right side of the equal operator.

Looping

Pretty much like Angular’s *ngFor, but the v-for directive supports looping over object using the for-in loop and iterators using the for-of loop.

The data looks like this

Event Handling

User Input Events like keypress or mouse click

This part I love the most over Angular’s since it‘s more improved

And for the sake of brevity, you can use this @ notation too

Here’s the JS for the same, nothing fancy here.

And here comes the most solicited feature that I like, Event Modifiers, i.e there’s no more need to preventDefault or stopPropagation inside your event handler function. You can easily do that declaratively inside your template like this

a(@click.capture.stop.prevent="doSomething")

or

input(v-on:keyup.13="submit")

How succinct! Isn’t it? These little features of Vue attributes to its ease of use and brevity which not only speeds up the development time but also makes the code look less verbose.

Single File Components

So far, we have just witnessed how Vue syntax looks like. But talking in more practical sense, you might be wondering how can I use this simple looking library to substitute my existing mammoth project built over maybe Angular or React?

The thing with Vue is that, it comes in all the forms you like, be it a teensy hobby project or a corporate level project. You as a developer are given full liberty to tailor it according to your needs.

Consider this Vue component that holds all of the three things together encapsulated in a single file.

So, as you can see, a single file is holding template tag, style tag and a script tag making it really comprehensive just at the first look. And there’s not even a single thing that breaches the W3C guidelines. In fact, this is the most W3C true-blue version of creating a web component I’ve ever seen after Polymer.

The Sassy way

Astute readers might observe from the previous example, I’ve used SASS for the styling needs and pug for templating. All you need to do is set the lang attribute of template and style tags and install pug and sass related packages from npm

Syntactically Awesome Style Sheets
Vue.js is pretty cool in that it works with lots of HTML template languages out of the box.

So, all you need to do is

<template lang="pug">

and for SASS

<style lang="scss">

State Management

Vue + Vuex + Nuxt

Ever since the inception of Flux with React, Centralised State Management pattern has become an elixir for creating any heavy web app these days. While there’s insanely popular Redux, Vue does State Management in it’s own way through a library Vuex.

Vuex Core Concept Flow Diagram

The core concept is same as Redux which includes immutability, central management of state etc. Only the jargon differs a bit. Reducers are apparently called mutations and the actions commit these mutations to make a change in the state. Also, actions can be async too inherently unlike Redux where you have to remain dependent on redux-thunk middleware to handle this “special case” of asynchronicity.

Here’s an example from the docs

and then an action can be dispatched on some user’s or asynchronous event as

NuxtJS

If you’re concerned about the rapid first meaningful paint for your public facing B2C web app. You must look for integration with NUXT for Universal or Server Side Rendering. You can easily generate a Nuxt powered Vue app with vue-cli as

$ vue init nuxt/starter project-name

It’ll provide you with a folder sturucture which gets automatically translated to Vue Router internally. For eg, you can create parameterised routes by creating a file name prefixed with underscore.

Also, for loading some data prior to rendering a view, it provides with a asyncData lifecycle hook in which you can perform some asynchronous task and hydrate your view when it’s visible. It’s with full support of async/await proposal.

It also provides a wonderful support for SEO using Vue Meta, pretty much like react-helmet out of the box. Check out this example for more info.

Vue CLI

Vue has emanated to decrease the development efforts while alleviating the problems present with other JS frameworks in the market. Keeping this in mind, the Vue team has provided us with this beautiful CLI for scaffolding your first Vue project swiftly.

$ vue init pwa project-name
Initialising a vue project using vue-cli

Vue offers various scaffolding templates. You may choose any of them based on your requirement.

Vue CLI scaffolding templates

And that’s all you need to hit to start working like a pro with all the production ready build scripts for you without worrying about webpack configs and all.

Vue Dev Tools

Debugging has never been such a breeze. Thanks to this awesome devtools by the Vue team with the support for both Vue Component level and Vuex level debugging.

Vue Chrome Dev Tools

Yet another reason for picking Vue for your next project.

Conclusion

While the dev community is going frenzy over whether to choose React or Angular, I believe it won’t be a wrong move to choose Vue because not only it inhabits all the already existing features of other frameworks but also it does it in a better, clean and standardised way. Also, as evident, Vue takes the W3C specs and proposals quite seriously, so I don’t see it being tossed away any sooner amidst the bloodshed of JS frameworks.

True, choosing Vue will impact your project but in a positive way by reducing your development time and minimising your bundle size too.

So after getting “up close and personal” with Vue, I’m totally sold! What about you?

Thank You! Happy Coding 🤓

Like what you read? Give Param Singh a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.