Though, this is not a particularly accurate or scientific metric to see what’s going on in the front-end community, but it is still nice to see that searches for “vuejs” and “reactjs” are very close.

Vue.js on Stakoverflow

I also looked at the community around Vue.js on Stackoverflow, and comparing it to React (considering all the marketting effort coming from Facebook, etc, and the age of React compared to Vue) I find it really impressive!

Less than 10% of all the questions are unanswered, which means, there are tons of people out there helping you if you are stuck.

vue.js tag on Stackoverflow:

reactjs tag on Stackoverflow:

What is Vue?

Vue, is an Approachable (All you need to know is Html, Css and JavaScript), Versatile (You don’t need to adopt to it in a big-bang. you can start using it incrementally) and High Performance (20KB min+gzip Runtime) JavaScript framework, that helps you create more maintainable and testable code base.

Vue.js is a Progressive Framework!

What do you mean by: “Vue.js is a Progressive Framework”?

That means, if you have an existing application, that uses any other front-end framework like Angular or React, you can still introduce Vue to your application, and use it in just part of your application, without the need to rewrite the whole thing using Vue. So it is very suitable for “brown field” projects.

What if I have a green field project?

Vue is useful for “green field” projects as well. It has the Core libraries you will need to build a full enterprise application (Vue Core, VueX, Vue-Router etc).

Similar to other JavaScript frameworks, you can split up your application/page into components, and each component will have its own JS, CSS and Html for render that part of the page/application, which will be critical when building large scale application in medium to large development teams.

Browser Support

The following is the list of supported browsers by Vue.js as of today:

As you can see, Vue supports almost all descent browsers (Sorry ie 6 users!)

“Hello World” using Vue

One of the main “pros” of Vuejs that everyone is so impressed with (though some suggest it reminds them of early Angularjs days or even knockout but I’m not sure if I agree with them) is the simplicity of booting up a new application.

Compared to other famous frameworks (Specially Angular) that need a lot of plumbing work to get going (though with Angular CLI things are much smoother now), Vue will boot up with minimum effort.

So let’s jump in.

First, we just create a simple html and reference the Vuejs library from a public CDN.

Now, lets add our App.js file and populate the {{ message }} to be displayed on the page:

That’s it! now if you open the html you should see a page with the message displayed in it:

Though Vue has also support for some CLI, but as you can see it is not really needed for booting up an app, since the effort is very little.

Let’s build something real

Now that we have this not so impressive “hello world” app running, let’s get our hands dirty and build something real!

What are we building?

We are building a simple client application using Vue.js, which calls back a Node.js (including Express.js) REST Api. And out Node server, will use Azure CosmosDB APIs, to Save and Retrieve data from a MongoDB database.

So instead of the famous MEAN stack (MongoDb, ExpressJs, Angular and Node), we will build a simple CRUD web application using “MEVN” stack (don’t look that up, I just came up with it!)

I know, sounds a bit too much but if you follow me closely, you will see that it is not that complex.

If you don’t know much about Nodejs, Expressjs, or Azure CosmosDB, don’t worry about it. I will explain things as we face them.

Wondering what is Azure CosmosDB all about? keep reading…

What is Azure CosmosDB?

When Microsoft introduced Azure DocumentDB, it was just a Document database, and Microsoft’s NoSQL Solution in the cloud.

Now recently, DocumentDB was moved to Azure’s new service: “Cosmos DB”

Azure Cosmos DB is Microsoft’s globally distributed, multi-model database. With the click of a button, Azure Cosmos DB enables you to elastically and independently scale throughput and storage across any number of Azure’s geographic regions.

Supported Data Models and APIs

The following list is the data models that CosmosDB support at the moment (more to come):

SQL API , MongoDB API , Cassandra API, Graph (Gremlin) API and Table API

Why would I use CosmosDB, rather than a relational database or other NoSQL Databases?

Azure CosmosDB gives you the best of the both world of relational database and non-relational databases.

As a high level the following table will give you an idea that what CosmosDB will give you that others don’t: