Vue Advanced Chat Component

2.1.2 · active · verified Tue Apr 21

Vue Advanced Chat is a versatile, highly customizable chat rooms component built with Vue.js, but designed to be compatible with any JavaScript framework (Vue, React, Angular) or no framework at all, thanks to its Web Component support. Currently stable at version 2.1.2, it sees regular updates with minor bug fixes and feature enhancements, as evidenced by its consistent monthly or bi-monthly release cadence. Key differentiators include its backend-agnostic design, comprehensive feature set (images, videos, files, voice messages, emojis, message editing, replies, user tagging, text formatting), integrated UI elements for chat states (seen, typing, deleted), and support for online/offline statuses and light/dark themes. It ships with TypeScript types, facilitating robust development, and provides examples for integration with backends like Firestore, demonstrating its flexibility in handling real-time data.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to set up `vue-advanced-chat` in a Vue 3 application using Vite. It covers the necessary `vite.config.ts` modifications to recognize custom elements, global CSS and component registration, and a basic `App.vue` component structure with example rooms, messages, and event handlers for sending and fetching messages.

/* vite.config.ts */
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Crucial for Vue to recognize vue-advanced-chat and emoji-picker as custom elements
          isCustomElement: tagName => tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
        }
      }
    })
  ]
});

/* main.ts or main.js */
import { createApp } from 'vue';
import App from './App.vue';
import 'vue-advanced-chat/dist/vue-advanced-chat.css'; // Essential styles
import 'vue-advanced-chat'; // Registers the custom Web Components

const app = createApp(App);
app.mount('#app');

/* App.vue */
<template>
  <div id="app-container">
    <vue-advanced-chat
      height="100vh"
      :current-user-id="currentUserId"
      :rooms="JSON.stringify(rooms)"
      :rooms-loaded="true"
      :messages="JSON.stringify(messages)"
      :messages-loaded="true"
      @send-message="handleSendMessage"
      @fetch-messages="handleFetchMessages"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// For type safety, if using TypeScript
// import type { ChatMessage, Room } from 'vue-advanced-chat/dist/types'; 

const currentUserId = 'user1';

const rooms = ref([
  {
    roomId: 'room1',
    roomName: 'General Chat',
    avatar: 'https://via.placeholder.com/150',
    users: [
      { _id: 'user1', username: 'Alice' },
      { _id: 'user2', username: 'Bob' }
    ],
    lastMessage: { content: 'Hello everyone!', senderId: 'user2', timestamp: Date.now() }
  },
  {
    roomId: 'room2',
    roomName: 'Private Discussion',
    users: [
      { _id: 'user1', username: 'Alice' },
      { _id: 'user3', username: 'Charlie' }
    ],
    lastMessage: { content: 'Meeting at 3 PM?', senderId: 'user3', timestamp: Date.now() }
  }
]);

const messages = ref([
  {
    _id: 'msg1',
    content: 'Hi there!',
    senderId: 'user1',
    timestamp: Date.now() - 60000
  },
  {
    _id: 'msg2',
    content: 'Hello Alice!',
    senderId: 'user2',
    timestamp: Date.now() - 30000
  },
  {
    _id: 'msg3',
    content: 'How are you two?',
    senderId: 'user1',
    timestamp: Date.now() - 10000
  }
]);

const handleSendMessage = ({ detail }: any) => {
  const { roomId, content, files, replyMessage } = detail; // 'detail' contains the event payload
  console.log('New message:', { roomId, content, files, replyMessage });
  messages.value.push({
    _id: `msg${Date.now()}`,
    content: content,
    senderId: currentUserId,
    timestamp: Date.now()
  });
  // In a real app, send this message to your backend
};

const handleFetchMessages = ({ detail }: any) => {
  const { room, options } = detail;
  console.log('Fetching messages for room:', room.roomId, options);
  // Simulate async fetch for older messages
  setTimeout(() => {
    // Add logic to load historical messages based on 'options.reset' or 'options.direction'
  }, 500);
};
</script>

<style>
body, html, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Important for full-height chat layout */
}
#app-container {
  height: 100vh;
  width: 100vw;
}
</style>

view raw JSON →