A One-on-one Chat App In Vue With CometChat View Details

Overview

Build one-on-one chat in your Vue app

This is the demo app that we build in the Build one-on-one chat in your Vue app tutorial.

Technology

This demo uses:

Running the demo

  1. Download this repository
  2. Run npm install
  3. Create .env.local in your root directory
  4. Add the following into it:
VUE_APP_COMETCHAT_APP_ID = your-app-id
VUE_APP_COMETCHAT_API_KEY = your-api-key
  1. To get your-app-id and your-api-key, go to your CometChat dashboard
  2. Create a new app and name it whatever you want
  3. Once it's created, you can see your app id below the app's name
  4. Replace your-app-id with it
  5. Click on Explore
  6. Go to API Keys tab and use the authOnly key as your-api-key in your .env.local
  7. Run the app using npm run serve
  8. View the app on http://localhost:8080

Useful links

You might also like...
"View source" directive for Vue

vue-sauce "View source" directive for Vue 🍝 About Automatically append up-to-date html documentation to your elements. Installation npm install --sav

A vue component to view the profile and repos of determined user
A vue component to view the profile and repos of determined user

vue-github-profile A vue component to view the profile and repos of determined user Instalation $ npm install --save vue-github-profile Usage GithubP

Vue-chessboard - FEN based chessboard view and functionality to your projects
Vue-chessboard - FEN based chessboard view and functionality to your projects

vue-chessboard What is vue-chessboard vue-chessboard is Vue component. It provides FEN based chessboard view and functionality to your projects. This

This project is based on Codepen and use vuejs to render a live view html/js/css of your code

Homemade Codepen This project is based on Codepen, and use vuejs to render a live view html/js/css of your code. Features Live preview of your code Ed

View BeReal posts from your friends without posting yours

View BeReal posts from your friends without posting yours. Screenshot and save BeReals from your friends without them knowing :)

Google-onetap-signin-client-vue - Vue 3 Demo of using the Google One-Tap Signin in a modular way (Client Code)

vue-google-onetap-signin Project setup npm install Compiles and hot-reloads for

🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.

Documentation You can browse the documentation for Vue Timeline on the website. Installation npm install @growthbunker/vuetimeline # Or if you prefer

Zerobytes-gridsome - An implementation for zerobytes.one using VUE and its framework Gridsome
Zerobytes-gridsome - An implementation for zerobytes.one using VUE and its framework Gridsome

A starter documentation theme for Gridsome. Installation If you have the Gridsome CLI installed, simply run: gridsome create your-project https://gith

One component to link them all 🔗

VueLink - One component to link them all! Lightweight wrapper component for external and vue-router links. 🔥 Features Tiny functional component SSR-s

Comments
  • Bump websocket-extensions from 0.1.3 to 0.1.4

    Bump websocket-extensions from 0.1.3 to 0.1.4

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Creating new users to chat

    Creating new users to chat

    Hi, Can you provide an example of creating a new user to chat?

    I have the following scenario: 1 - A button where I click and it will create a new user(contact) in Cometchat 2 - This new created user will be listed on the left sidebar where I will be able to chat.

    I already made this but right after I create user, the entire component disappear from my code.

    Thank you

    opened by paseto 0
  • Remove spacing from .env.local in README

    Remove spacing from .env.local in README

    Change:

    VUE_APP_COMETCHAT_APP_ID = your-app-id
    VUE_APP_COMETCHAT_API_KEY = your-api-key
    

    to:

    VUE_APP_COMETCHAT_APP_ID=your-app-id
    VUE_APP_COMETCHAT_API_KEY=your-api-key
    

    I think Node will interpret the first space after = and that could potentially trip users up.

    opened by bookercodes 0
Owner
CometChat Pro Tutorials
In-depth tutorials for building your own chat and messaging apps!
CometChat Pro Tutorials
Vue-chat - Chat app Vue.js & Tailwind with FireBase

Demo: https://vue-chatapp.vercel.app/ Chat app for education Vue.js Stack Vue.js

Yuriy Yurich 0 Aug 5, 2022
Leopard Chat UI - A Teneo Chat Client based on Vue and Vuetify

A Feature Rich Chat Client for Teneo About • Installation • Features • Documentation • Demo • Contributing • Author • Support • License About Leopard

Peter Joles 66 Nov 24, 2022
Private-Chat-with-SocketIO.JS - A simple minimal Web application to chat in private with friends

Private messaging with Socket.IO Please read the related guide: Running the fron

null 2 Feb 10, 2022
A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

vue-advanced-chat Vue 3 compatibility ?? Features Vue, Angular & React compatibility Customizeable realtime chat messaging Backend agnostic Images, vi

Antoine Dupont 1k Nov 20, 2022
A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

vue-beautiful-chat vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messag

Matteo Merola 1.2k Nov 19, 2022
Easy to use Vue chat.

basic-vue-chat Implementation of Vue-based chat. basic-vue-chat Installation npm yarn using repository Dependencies Usage Pushing messages Handling me

Jedrzej Pawel Maczan 69 Nov 24, 2022
This is chat area web application for developers.

This is chat area web application for developers.

Buğrahan Öztürk 6 Apr 12, 2022
Sample Amazon Lex chat bot web interface

Sample Amazon Lex Web Interface sample Amazon Lex Web Interface Overview This is a sample Amazon Lex web interface. It provides a chatbot UI component

AWS Samples 586 Nov 20, 2022
A simple chat web page built with Quasar.js

Chat (chat-frontend-quasar) A simple chat web page built with Quasar.js Install the dependencies npm install Start the app in development mode (hot-co

Henrique Lima 0 Feb 25, 2022
Ft transcendence - A single-page website to play pong, with a chat and an account system implemented

Welcome to my ft_transcendence repository ?? ⭐️ The aim of this project is to bu

Alexandre de Garrigues 0 Jan 11, 2022