Forget Year of the Rooster. 2017 is the year of eCommerce.
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!
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:
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:
Pro tip: Use the production version during development so you will see all the warnings they have included for common mistakes. You can download the unminified production version from vuejs.org here
Setting up the HTML view with data-binding
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.