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.