Building a Vue.js Theme on top of the WP-API Introduction

In: Tutorial

I've been waiting for some time for the WP-API to come of age, be bundled into core - and for documentation and tutorials to begin to appear. This spring seemed to be the breaking point, when the WP-API, after two years of anticipation, was finally bundled into WP4.4. Thanks to Zac Gordon's excellent JavascriptForWordpress course, I was able to construct a rudimentary Vanilla JS theme (see github repo) but I wanted to go futher, and actually use a framework. 

React.js is the new default after the iterations of Angular, but I never quite got with React. Something about JSX, and all that inline code. I'd been playing around with Vue.js, while learning Laravel. I started on Laracasts with Vue.js 1.0 and it felt more natural to me so when I decided to learn a JS framework, after some delibaration, I decided to go for Vue over React. As Josh Pollock, a big Vue advocate, told me at Wordcamp Montreal, I'll be able to learn React much more easily after I've mastered Vue.

Then Automattic turned their back on React.js, and Vue seemed like the natural choice (Will Vue take the place of React in WP Core? Who knows?)

Starting with the principle of building on what you already now, I decided to learn how to build a WP theme using Vue for my writing portfolio. I started with Josh's Vue for WP, then eventually found this: Watch Learn WP Theme with Vue.js

It seemed perfect, a step by step tutorial on building a WP theme with Vue.js, incorporating filtering (search) by title, and by category. 

Only problem? The tutorial is from a couple of years ago, and is built on Vue.js 1.0. Things like 'filterBy' are gone and 'vue resource' is deprecated. So I'll still be following the tutorial - but updating to Vue.js 2.0. Stayed tuned . . . final code with be on github.