Recently, my company switched from Hipchat to Slack for our internal chat system. Unimpressed with the lack of a dark theme, I decided to make my own Slack.
The Result:
See the Pen Vue.js Message App | Chatty by Michael Lewallen (@michael-lewallen) on CodePen.
How it works
The main things I wanted to focus on for this little side project was to be able to add messages to different chats as well as let the user edit their information as well as the background color.
I figured Vue.js would be an easy way to implement a chat-like interface without access to a database to store and retrieve data from (although I plan on hooking up Firebase to the project in the future). So I set up a data structure that stores the users info, chat rooms as well as allowed the user to push their own chats to the chat rooms.
In order to help with getting the main elements styled without having to custom style everything I hooked up Bootstrap 4 to the project. It helps a lot to have helper classes already set up for you to make smaller design changes easier so you don’t have to write extra CSS.
Speaking of CSS and Vue let’s go over the stack I used for the project.
The Stack
To make this thing work I’ve got my main HTML template that Vue refers to on it’s initial load, CSS with Stylus as my pre-processor to help with auto-prefixing for browser support and of course Vue.js to work with the data and binding the user data to the project. I also have Font Awesome in there for the icons.
Overall, I’m pretty happy with the outcome after getting it to work in one (late) night! Let me know what you think of it or if you have your own chat like project!
