Here at Voltage, we are always looking for new ways to build state of the art websites and applications. For some of our projects we already use robust frameworks like AngularJS for advanced web components, but sometimes we just need a lightweight solution to bring real-time, data binding, interactive Webapp architecture to front-end interfaces. This is where Vue.js comes in to bring lightweight reactive components for modern web interfaces. The minified+gzip version of Vue.js file size only add ~26kb to the download overhead and requires no other library dependencies!
What is Vue.js you are wondering? Vue.js provides a fast and composable MVVM solution that allows the view (HTML) and the model (Javascript object) to have real-time two way data binding without the bloat of other frameworks like AngularJs. While the example below could be adapted for a variety of uses, like product display pages, media galleries, etc., we will walk you through how we built a simple Grid/List view to display some of our recent Voltage blog posts.

First, lets start by showing you the working Voltage Blog Grid/View list made using Vue.js. In the top right of the example’s red toolbar you will see two buttons that let you switch between the List or Grid views in real-time without reloading the page. Go ahead and give them a try:

See the Pen Vue.js grid / list view example by Adam Rowan (@AdamVoltage) on CodePen.

Getting Started with Vue.js

At Voltage we would normally setup Vue.js on your project using a package manager like Bower, but for this article we built the example in codepen.io and included the Vue.js javajscript library from a CDN:

Setting up the Javascript object model

Once Vue.js has been included Vue will be registered as a global variable. Now we setup a new Vue javascript object called blog_list and attach it to an HTML element we will give an id of #js-grid-list. Then we will setup a layout variable to show the grid view by default along with some JSON data to bind with our HTML view.

See the Pen Vue.js grid / list view example by Adam Rowan (@AdamVoltage) on CodePen.

Setting up the HTML view with data-binding

Now that we have our Vue object created, lets create a container to house our Grid/List views. At the top of the container, add a toolbar that has two buttons with bound click events to change the “layout” variable which we defaulted to the grid view in the javascript code above. Then below the toolbar, setup two html views styled by classes grid and list that Vue.js lets us choose which UL to show depending on the “layout” variable. Inside each of our HTML views, we bind the img or title data to loop through the JSON data:

See the Pen Vue.js grid / list view example by Adam Rowan (@AdamVoltage) on CodePen.

Style everything with CSS

Because no working code would be complete without styling, here is the CSS. You will notice that we are not hiding or showing the grid or list views through CSS. That is all done through the Vue.js framework.

See the Pen Vue.js grid / list view example by Adam Rowan (@AdamVoltage) on CodePen.