I have been looking at Vue for a while now, since I saw 2.0 posted in Hacker News and wondered what I was missing in the world of JS frameworks. Vue claimed to be simpler and faster than Angular and React, and the getting started docs seemed easy to follow. I started off with some basic readings and tutorials but soon wanted to do something practical.

I'll be working on a scorecard app. This lets you define how you want to be evaluated on a daily basis, and then enter scores and notes for those items daily. This is also a design challenge, to come up with something that is easy to read and edit, while looking good. To complicate things further, I'm using Drupal as a backend.

To get started, I built a few things in Drupal:

Attributes taxonomy, to categorize scorecard items. I used Health, Learning, Productivity, and Personal to get started.

Scorecard content type, which will be created daily to record progress.

Score content type, which holds scores for specific items, and references Attributes. Scores are referenced by Scorecard.

And here's what that looks like in Drupal with the Stark theme and some basic config:

So hopefully you can see where this is going. I need a better design for this scorecard, then I'd like to make it easy to add and edit items to it.

To get started in Drupal, I created a block that will hold the Vue container to display the node content.