Skip to content
Group chat app in Vue.js powered by PubNub
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Fixed 'filename' in webpack.prod.conf.js May 14, 2019
config
dist Added background image May 14, 2019
docs Added CNAME file May 13, 2019
media Added media folder to put background picture May 14, 2019
src
static
.babelrc Backend set up for chat app. Still need to work on setting up vuex May 2, 2019
.editorconfig Backend set up for chat app. Still need to work on setting up vuex May 2, 2019
.gitignore added dist folder May 14, 2019
.postcssrc.js Backend set up for chat app. Still need to work on setting up vuex May 2, 2019
README.md
index.html Backend set up for chat app. Still need to work on setting up vuex May 2, 2019
package-lock.json build project works now May 14, 2019
package.json
vue-group-chat-app.png Resized snapshot pic in README May 14, 2019
vue.config.js Changed path in index.html May 14, 2019

README.md

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

Setup

  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 https://github.com/ocastroa/Vue_Chat.git
  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
You can’t perform that action at this time.