Getting started with VueJS

These last few months I have been having a blast learning Node and Express writing my bill tracking application. Recently I have been fixing issues in the user interface. I do not have problems writing the “guts” of an application, however, I have the design talents of a 3 year old hopped up on chocolate. Which is to say, none.

Recently a buddy of mine has been doing quite a few blog posts about VueJS so I thought I might pick a view, throw in Vue and see where the cards would fall.

Photo by Michał Parzuchowski on Unsplash

The first view in the application I converted over to Vue was my Payee view. It really surprised me how easy it was to integrate Vue even though I had never used it before. Admittedly, it was only a list of payees and not very complicated but I like how easy it was to create filters to format data.

Adding Vue to the payments page

The payee page went so smoothly next I thought I would add Vue to the payments page. This would be my first attempt at a complicated page. There could literally be hundreds of payments. The payments are always sorted by date descending, but it would be important to be able to page through the results. Being new to VueJS, I thought it might be a good exercise to use an existing data table module. I found one and made it work, the down side being I had to write an API endpoint specifically to format the paging information and data.

The getPaymentsVue API handler: a lot of code to support one plugin

Talking with Ray Camden, we discussed my experience integrating the data table. I was explaining in great detail (read: complaining) the process of getting the data formatted for the table. Ray threw together a quick demonstration of table sorting and then added some pagination for good measure.

Honestly, the power of VueJS did not click for me until reading that. Ray managed to add more functionality with fewer lines of code than my custom API. This also had the added benefit of being able to work with the API routes I already have in place.

Moving pagination from the server to the client

A few slight modifications later my payment page is working the way I originally intended. Extra style points for adding a pageInfo computed property that shows which payments are being displayed. Sorting has been removed but it would be easy enough to add that back later.

The new VueJS hotness

The API controller is much smaller once the getPaymentsVue method was removed. Paging and detail calculations have been moved from the server to the client which is an added bonus.

Moving forward

My next major step will be a rewrite of the node-billz application with Nuxt. Nuxt is a framework for VueJS that handles configuring vue-router, vuex and vue-meta so you do not have to. It uses webpack, vue-loader and babel to bundle, code-split and minify your code. You can scaffold an application in minutes, not hours.

I am really impressed with VueJS. Core concepts are easy to pick up and once you know them, it is easy to achieve impressive results.

Like what you read? Give Robert Zehnder a round of applause.

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