https://github.com/element-plus-x/Element-Plus-X
๐๐๐ ไธไธชๅบไบVue3 + Element-Plus ๅผ็ฎฑๅณ็จ็ไผไธ็บงAI็ปไปถๅบๅ็ซฏ่งฃๅณๆนๆก --- Element-Plus-X
https://github.com/element-plus-x/Element-Plus-X
ai-component element-plus element-plus-x elementplus elment-plus-components vue vue-components vue-element-plus-x vue3 vue3-element-plus-x vue3-element-plus-x-components
Last synced: 5 months ago
JSON representation
๐๐๐ ไธไธชๅบไบVue3 + Element-Plus ๅผ็ฎฑๅณ็จ็ไผไธ็บงAI็ปไปถๅบๅ็ซฏ่งฃๅณๆนๆก --- Element-Plus-X
- Host: GitHub
- URL: https://github.com/element-plus-x/Element-Plus-X
- Owner: element-plus-x
- License: mit
- Created: 2025-03-02T14:20:00.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-07-29T11:23:51.000Z (5 months ago)
- Last Synced: 2025-07-29T12:05:16.670Z (5 months ago)
- Topics: ai-component, element-plus, element-plus-x, elementplus, elment-plus-components, vue, vue-components, vue-element-plus-x, vue3, vue3-element-plus-x, vue3-element-plus-x-components
- Language: Vue
- Homepage: https://element-plus-x.com
- Size: 12 MB
- Stars: 898
- Watchers: 9
- Forks: 119
- Open Issues: 91
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/HeJiaYue520/Element-Plus-X/blob/main/LICENSE)โ[](https://github.com/HeJiaYue520/Element-Plus-X)โ[](https://www.npmjs.com/package/vue-element-plus-x)โ[](https://www.npmjs.com/package/vue-element-plus-x)โ[](https://github.com/HeJiaYue520/Element-Plus-X/blob/main/README.md)
๐The project template has been released๐
โ
โ
โ
โ
โ
**English** | [็ฎไฝไธญๆ](./README.md)
โ
# ๐ Element-Plus-X
**An out-of-the-box enterprise-level AI component library (based on Vue 3 + Element-Plus)**
## ๐ข Quick Links
| Resource Type |
Link |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Documentation** | [๐ Development Documentation](https://element-plus-x.com) |
| **Online Demo** | [๐๏ธ Online Preview](https://v.element-plus-x.com) |
| **Code Repository** | [๐ GitHub](https://github.com/HeJiaYue520/Element-Plus-X)
[๐ Gitee](https://gitee.com/he-jiayue/element-plus-x) |
| **NPM Package** | [๐ฆ npm](https://www.npmjs.com/package/vue-element-plus-x) |
| **Issue Feedback** | [๐ Submit a Bug](https://github.com/HeJiaYue520/Element-Plus-X/issues) |
| **Community** | [๐ Discussion Group](https://element-plus-x.com/en/introduce.html#%F0%9F%91%A5-%E7%A4%BE%E5%8C%BA%E6%94%AF%E6%8C%81) |
| **Template Project Preview** | [๐ Online Preview](https://chat.element-plus-x.com/) |
| **Template Project Source Code** | [๐ GitHub](https://github.com/HeJiaYue520/ruoyi-element-ai)
[๐ Gitee](https://gitee.com/he-jiayue/ruoyi-element-ai) |
## ๐ ๏ธ Core Features
- โจ **Enterprise-level AI Components**: Pre-built scenario-based components such as chatbots and voice interaction.
- ๐ **Zero-configuration Integration**: Based on the Element-Plus design system, ready to use right out of the box.
- ๐ฆ **On-demand Loading**: Provides Tree Shaking optimization.
## ๐ Installation
```bash
# NPM
npm install vue-element-plus-x
# PNPM (Recommended)
pnpm install vue-element-plus-x
# Yarn
yarn install vue-element-plus-x
```
## ๐ Usage Examples
1. **On-demand Import**
```vue
import { BubbleList, Sender } from 'vue-element-plus-x';
const list = [
{
content: 'Hello, Element Plus X',
role: 'user'
}
];
```
2. **Global Import**
```ts
// main.ts
import { createApp } from 'vue';
import ElementPlusX from 'vue-element-plus-x';
import App from './App.vue';
const app = createApp(App);
// Globally import using app.use()
app.use(ElementPlusX);
app.mount('#app');
```
3. **CDN Import**
```html
```
## ๐ Implemented Components and Hooks
| Component Name | Description | Documentation Link |
| -------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ------------------------------------------ |
| `Typewriter` | Typewriter animation component | [๐ Documentation](https://element-plus-x.com/en/components/typewriter/) |
| `Bubble` | Extended bubble message component | [๐ Documentation](https://element-plus-x.com/en/components/bubble/) |
| `BubbleList` | Extended bubble message list component | [๐ Documentation](https://element-plus-x.com/en/components/bubbleList/) |
| `Conversations` | Extended conversation management component | [๐ Documentation](https://element-plus-x.com/en/components/conversations/) |
| `Welcome` | Welcome component | [๐ Documentation](https://element-plus-x.com/en/components/welcome/) |
| `Prompts` | Prompt set component | [๐ Documentation](https://element-plus-x.com/en/components/prompts/) | |
| `FilesCard` | File card component | [๐ Documentation](https://element-plus-x.com/en/components/filesCard/) |
| `Attachments` | File attachment upload component | [๐ Documentation](https://element-plus-x.com/en/components/attachments/) |
| `Sender` | Intelligent input box (with voice interaction and built-in command operations) | [๐ Documentation](https://element-plus-x.com/en/components/sender/) |
| `MentionSender` | Command input box (with mention list) | [๐ Documentation](https://element-plus-x.com/en/components/mentionSender/) |
| `Thinking` | Extended "Thinking..." component | [๐ Documentation](https://element-plus-x.com/en/components/thinking/) |
| `ThoughtChain` | Thought chain component | [๐ Documentation](https://element-plus-x.com/en/components/thoughtChain/) |
| `useRecord` | Browser-built voice recognition API Hooks | [๐ Documentation](https://element-plus-x.com/en/components/useRecord/) |
| `useXStream` | Stream mode interface Hooks | [๐ Documentation](https://element-plus-x.com/en/components/useXStream/) |
| `useSend & XRequest` | Split version of stream mode Hooks (extended) | [๐ Documentation](https://element-plus-x.com/en/components/useSend/) |
## ๐ฏ Development Plan (Updated Weekly)
๐ We will collect everyone's encountered problems and demand scenarios in various aspects such as issues and communication groups, and develop short-term and long-term development plans. For more details, please move on ๐ **[Development Plan](https://element-plus-x.com/en/roadmap.html)**
## ๐ค Contribute
1. **Fork the repository** โ 2. **Create a Feature branch** โ 3. **Submit a Pull Request**
Details can be moved ๐ **[๐ Documentation](https://element-plus-x.com/en/components**
We welcome:
- ๐ Bug fixes
- ๐ก Proposals for new features
- ๐ Documentation improvements
- ๐จ Style optimizations
## ๐ฅ Community Support
Join the WeChat communication group to get the latest news and technical support
If the group link expires, scan the author's QR code:
