When building a chat application, your head tends to spin in terms of what functionality you need. When building in-house, this process can turn into a nightmare. Thankfully, there are companies out there such as Stream who provides chat out of the box as an API.

In this tutorial, I’ll show you how to implement basic chat functionality using Chat powered by Stream. It will be real-time, easy to understand, and we’ll use Vue as our JavaScript framework.

Before we get started, take a look at a demo of the application (image below) of what we’ll be building.

This tutorial assumes the following:

To start using Stream Chat, we need need to have an API key, which we can get by creating a Stream Chat app. If you don’t have one already, create an account or login to your dashboard and create an app.

Once the app is created, click on the app from the dashboard overview you will be provided with a few options within your dashboard. Click on Chat to go the Stream Chat dashboard.

While the tutorial will be more focused on Vue.js, we still need a simple API, which we’ll use for generating a Stream Chat token that will be used to authenticate users in the Vue app. So, let’s spin up a dead simple API.

View the code on Gist.

Next, we need to install a couple of dependencies:

View the code on Gist.

As you might have guessed from the list of dependencies we installed, we’ll be using Express for the API. We also installed the Stream Chat Node.js SDK, which we’ll use to generate the authentication tokens. Create an index.js file and paste the following:

View the code on Gist.

The API has just one endpoint, which accepts a users username. Using the Stream Chat Node.js SDK, we’ll generate a token from the username, and return a JSON object containing a user object and the generated token.

Next, we’ll create a .env file and add the snippet this snippet of code to it:

View the code on Gist.

Finally, start the API with the following command:

View the code on Gist.

Once the API is up and running on http://localhost:3000, you’re all set to continue on.

With the API out of the way, let’s start building the Vue app. For this, we’ll be making use of the Vue CLI.

View the code on Gist.

When prompted, press enter to select the default preset. Once the Vue app is created, let’s install the necessary dependencies that we’ll be using in the Vue app:

View the code on Gist.

Here, we install the Stream Chat JavaScript SDK and Axios, which will be used for making HTTP requests.

Next, create a .env file and add the snippet below:

View the code on Gist.

Start the app and leave it running while we continue to build (the UI will automatically update with changes):

View the code on Gist.

Note that the app should be running on http://localhost:8080

For quick prototyping the design of our application, we’ll be using a CSS framework called UIKit. Let’s pull it from a CDN. Add the line below to head section of your index.html:

View the code on Gist.

Now, we can start building our app. To keep things simple and straightforward, we’ll be using a single component, which is App.vue. The component will be comprised of two sections: login and chats. Update App.vue as below:

View the code on Gist.

hasJoinedChat will be updated accordingly once a user joins chat, and it determines what users see (login form vs. chats). We’ll get to the other data properties in subsequent sections.

For the login interface, replace the <!– login form will be here –> with the code below:

View the code on Gist.

This view contains a form for joining a chat. The form has just one field, which is for the username. Once the form is submitted, a joinChat method will be called. So let’s create the method. Update the script section of App.vue as follows:

View the code on Gist.

Here, we make a request to our API passing along the user’s username. We set hasJoinedChat to true. Also, we set user and token to their respective values gotten for our API. Lastly, we call two methods. The initializeStream method creates a new instance of Stream Chat, using our API key. Then we specify the current user and pass along the user token. Here, we set only the id and name fields for the user. Of course, you can add other fields as well. Check the docs for other supported fields.

The initializeChannel method creates a new messaging channel. Lastly, we fetch the channel’s messages and subscribe to the channel for future messages.

Now that users can join a chat, let’s allow them to see previous chat messages as well as add and send new messages. Replace the <!– chats and chat form will be here –> with the code below:

View the code on Gist.

This is comprised of two parts: chat messages and form to send a new message. For the list of messages, we loop through the messages array and display an individual message. We add a few tweaks to how the messages are displayed. If the user is the sender of a message, we align the message to the right, and on the flip side, we align the user to the left.

To send a new message, the sendMessage method is called once the form is submitted. To create the method, add the following code inside the methods object:

View the code on Gist.

Using the channel instance created earlier, we call a sendMessage method on it, which accepts an object of the message content. In our case, we are only sending a text. For a full list of what can be sent as the message object, check out the docs on sending a message. Lastly, we clear the form field.

As it stands, when we send a new message we don’t see the message immediately, the same goes for the other person we’re chatting with.This is because our app currently lacks real-time interactivity. That’s bad! Not to worry, Stream Chat has our back on this. So let’s fix it. Add the code below inside the joinChat method immediately below where we call the initializeChannel method:

View the code on Gist.

Stream Chat provides a handful of events which we can listen to and perform some actions accordingly. The one we are interested in our case it the message.new event, which is triggered every time a new message is sent. So we listen for that event and update the messages array with the new message, which is passed along with the event.

Now, let’s test what we’ve been building so far. Navigate to http://localhost:8080 and open the app in two separate windows and login and start chatting.

In this tutorial, we learned how to build a real-time chat app with Vue, using functionality provided by Stream Chat.

Considering that our application is as basic as it gets, we’ve barely scratched the surface of what’s possible with Stream Chat. Stay tuned for future posts and tutorials on additional functionality. To learn more about Stream Chat, have a look here.

You can find the complete code of the Vue App as well as the API on GitHub.

Happy coding!

The post Create a Chat App with Vue.js and Stream appeared first on The Stream Blog.