This week I promised myself that I’d have something up, no matter how basic, it should at least demonstrate the use of both technologies.

So I came up with this Web App (forgive my horrible design).

A simple Web App that displays some books I’ve read.

I was serious when I said I would build something basic. I implemented the frontend of the app using Vue.js while I did the backend with Hasura which offers real-time GraphQL for Postgres databases. We’ll go through how everything came into place.

The frontend bit

Like I said above, I did this portion in Vue.js, we’d have to install it before we can go on and to do that we’ll need node.js on our system. Once we’ve got node installed, enter the following command to install the vue cli npm i -g @vue/cli . To set up a new Vue project, we enter the following command vue create myapp , replace myapp with whatever you want to name this app and click default when prompted to pick a preset. When done initializing, your folder structure should resemble the one below.