dchat-vue

A Vue 3 chat dialog component that displays in the bottom right corner of the screen.

Features

• Default positioning in the bottom right corner
• Click to open/close chat dialog
• Customizable bottom and right positioning via props
• Lightweight with no external UI framework dependencies
• Support for AI chat functionality
• Responsive design
• Native HTML5 and CSS3 implementation

Installation

npm install dchat-vue

Usage

Basic Usage

<template>
  <div>
    <DChatVue
      title="在线客服"
      :username="'user123'"
      :bottom="50"
      :right="20"
      :marker="'your-marker'"
    />
  </div>
</template>

<script setup>
import DChatVue from 'dchat-vue'
import 'dchat-vue/dist/style.css'
</script>

Advanced Usage

<template>
  <div>
    <DChatVue
      title="智能助手"
      :default-open="true"
      :bottom="100"
      :right="50"
      :marker="'your-marker'"
    />
  </div>
</template>

<script setup>
import DChatVue from 'dchat-vue'
import 'dchat-vue/dist/style.css'
</script>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | String | "在线客服" | The title of the chat dialog | | username | String | "" | The username of the current user | | defaultOpen | Boolean | false | Whether the dialog is open by default | | bottom | Number | 50 | Distance from the bottom of the screen (px) | | right | Number | 20 | Distance from the right of the screen (px) | | marker | String | "" | A marker to identify different chat instances |

Events

| Name | Description | |------|-------------| | open | Emitted when the chat dialog is opened | | close | Emitted when the chat dialog is closed |

Project Structure

.
├── src/
│   ├── components/
│   │   ├── ChatDialog.vue      # Main chat component
│   │   ├── ChatMessage.vue     # Message component
│   │   ├── TryToAsk.vue        # Suggested questions component
│   │   └── index.js            # Component exports
│   ├── utils/
│   │   ├── httpClient.js       # HTTP utilities
│   │   └── index.js            # Utility functions
│   └── main.js                 # Entry point
├── vite.config.js              # Vite configuration
├── package.json                # Package configuration
└── README.md                   # This file

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Build

npm run build

This will generate the following files in the dist directory:

• dchat-vue.js - ESM build
• dchat-vue.umd.cjs - UMD build
• style.css - Component styles

Dependencies

• Vue 3 - ^3.5.0
• @microsoft/fetch-event-source - ^2.0.1

Lightweight & Framework-Free

This component is built with pure Vue 3 and native HTML5/CSS3, without any external UI framework dependencies. This makes it:

• Lightweight: Smaller bundle size
• Fast: No additional framework overhead
• Flexible: Easy to customize and extend
• Compatible: Works in any Vue 3 project

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT