Vue.js: An Introduction

I have written a few blog posts on Angular in the past, mostly because it’s a framework I leverage quite often and am usually very pleased with how it works. But Vue.js is another framework that I’ve been playing around with lately, so I wanted to quickly write down some of my initial thoughts on it.

If you’re not familiar with Vue.js, it’s a progressive framework for building user interfaces – much like Angular and React. I think the big appeal of Vue.js is its fast setup. Angular / React often starts with some sort of CLI or fighting with Webpack. Vue.js is as simple as pulling a file from a CDN. I think of Vue.js as a smaller / leaner SPA framework when compared to Angular or React.

As a quick demonstration of how Vue.js works, I will build a very simple contact list on a web page and use Vue.js to data bind the list of contacts onto the HTML page.

Here are the steps I used to get started with Vue.js.

Create a directory for the source code.

Open VS Code in that directory.

Create an index.html file.

Add in bootstrap.

Add in Vue.js.

Add a template for the table for contacts. Notice the syntax is very similar to other platforms.

Configure the Vue.js component. For this, we will use some sample data.

Host the page using “http-server”.

npm install -g http-server
http-server

Test the page.

Another nice thing about Vue.js is that all the source for this demo can be included a single file. 🙂

In my next blog post on Vue, we will look at the Vue CLI.

Are you using Vue.js? What do you think of it? Hit me up on Twitter or sound off in the comments below.