[](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/packages/components/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://v2.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://v2.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
```
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
```
## โ ๏ธ XMarkdown Component Migration Notice
The `XMarkdown` component has been separated into a standalone NPM package. We recommend using the new version:
๐ฆ **New Package:** [x-markdown-vue](https://www.npmjs.com/package/x-markdown-vue)
๐ **GitHub:** [element-plus-x/x-markdown](https://github.com/element-plus-x/x-markdown)
### Migration Guide
```bash
# Install the new package
pnpm add x-markdown-vue
```
```vue
```
New Features:
- ๐ Vue 3 Composition API
- ๐จ Syntax highlighting (Shiki, 100+ languages)
- ๐ Streaming rendering (for AI chat scenarios)
- ๐งฎ LaTeX math formulas
- ๐ Mermaid diagrams
- ๐ Dark mode
- ๐ Flexible plugin system
## ๐ Implemented Components and Hooks
| Component Name | Description | Documentation Link |
| -------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------ |
| `Bubble` | Extended bubble message component | [๐ Documentation](https://v2.element-plus-x.com/en/components/bubble/) |
| `BubbleList` | Extended bubble message list component | [๐ Documentation](https://v2.element-plus-x.com/en/components/bubbleList/) |
| `Conversations` | Extended conversation management component | [๐ Documentation](https://v2.element-plus-x.com/en/components/conversations/) |
| `Welcome` | Welcome component | [๐ Documentation](https://v2.element-plus-x.com/en/components/welcome/) |
| `Prompts` | Prompt set component | [๐ Documentation](https://v2.element-plus-x.com/en/components/prompts/) | |
| `FilesCard` | File card component | [๐ Documentation](https://v2.element-plus-x.com/en/components/filesCard/) |
| `Attachments` | File attachment upload component | [๐ Documentation](https://v2.element-plus-x.com/en/components/attachments/) |
| `XSender` | Intelligent input box (with voice interaction and mention support) | [๐ Documentation](https://v2.element-plus-x.com/zh/components/xsender/) |
| `Thinking` | Extended "Thinking..." component | [๐ Documentation](https://v2.element-plus-x.com/en/components/thinking/) |
| `ThoughtChain` | Thought chain component | [๐ Documentation](https://v2.element-plus-x.com/en/components/thoughtChain/) |
| `useRecord` | Browser-built voice recognition API Hooks | [๐ Documentation](https://v2.element-plus-x.com/en/components/useRecord/) |
| `useXStream` | Stream mode interface Hooks | [๐ Documentation](https://v2.element-plus-x.com/en/components/useXStream/) |
| `useSend & XRequest` | Split version of stream mode Hooks (extended) | [๐ Documentation](https://v2.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://v2.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://v2.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:
