Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Group Chat App in Vue.js

Vue Group Chat

A simple group chat app, built with PubNub's Vue V4 SDK, that allows users to subscribe to a channel and publish messages to the group, all in realtime. Messages are saved to the network, using Storage & Playback, so users can see past or missed messages.

Vue Group Chat App


  1. First thing first, sign up for a free PubNub account to get your Pub/Sub API keys.
PubNub Signup
  1. To save the messages to history, go to your PubNub Admin Dashboard, click on the Demo Project App, or create a new app for this project, and click on Keyset. Scroll down until your get to Storage & Playback. Toggle the switch to on and keep the default values the same.

  2. Clone the repo.

git clone
  1. Open the project in your favorite text editor, such as VS Code or Notepad++

  2. Go to main.js and replace 'publish_Key' and 'subscribe_Key' with the keys you got from Step 1.

  3. Install dependencies.

npm install
  1. Serve with hot reload at localhost:8080.
npm run dev
  1. Copy and paste the URL to another tab, or preferably a new window, and type a message in the message input. Press 'Enter' and you should see the message in both chat logs. Enter a couple more messages, then reload the page. Since Storage & Playback was enabled, the last 6 messages (you can change this number with 100 being the max) will show on the chat log.

Build Your Own Group Chat App in Vue.js

To learn more about this project or if you want to build this project from scratch, check out the tutorial.

PubNub Blog


No releases published


No packages published