Realtime Chat app with Vue and Hasura

So before VueConf I thought it will be a great idea to rewrite our React realtime chat app to VueJS, which features login, realtime chat inbox, typing indicator, online users

So here you go — the chat is up and running here

So in this blog post I want to describe what I actually did for rewriting that. I won’t go deeper in data modeling cause that is perfectly explained in this blog post, but let me explain the steps I did for creating this in Vue.
For more in detail explanation how to use Vue with GraphQL you can check out my course here:

If you are really new to GraphQL you can check a bootcamp I did on my Youtube channel

And check our Hasura Youtube channel for more Hasura content

So the steps I did after Data modeling:

1. Add login functionality to Vue Router:

You can learn more about that in the course

3. Getting online users

For displaying online users we want to emit online event every time user is logged in so in our Home route we have to emit online event using apollo mutation

4. Subscribing to messages

For getting the messages I created a query that will get all the messages and then subscribe to a new ones. I’ve explained how to deal with that in my Vue course too.

5. Typing Indicator

We also needed user typing notifications so I created emitTyping event mutation that emitted event every few characters. That let us to keep track on typing users and show typing indicator whenever other user is typing

In a nutshell that’s about it. I had an amazing experience creating this app with VueJS and for more info on how and what decisions I did when coding this app you can check it either on my github
or in Hasura sample apps repository

Originally published at dev.to.