English | 简体中文

 

💖The project template has been released💖

         

🚀 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
Online Demo	👁️ Online Preview
Code Repository	🐙 GitHub 🚠 Gitee
NPM Package	📦 npm
Issue Feedback	🐛 Submit a Bug
Community	🐒 Discussion Group
Template Project Preview	👀 Online Preview
Template Project Source Code	🐙 GitHub 🚠 Gitee

🛠️ 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

npm

npm install vue-element-plus-x --save

pnpm

pnpm add vue-element-plus-x --save

yarn

yarn add vue-element-plus-x --save

📚 Usage Examples

1. On-demand Import

<script>
import { BubbleList, Sender } from 'vue-element-plus-x';

const list = [
  {
    content: 'Hello, Element Plus X',
    role: 'user'
  }
];
</script>

<template>
  <div
    style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;"
  >
    <BubbleList :list="list" />
    <Sender />
  </div>
</template>

2. Global Import

// 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

<!-- This method is still under testing -->
<!-- CDN Import -->
<script src="https://unpkg.com/vue-element-plus-x@1.3.0/dist/umd/index.js"></script>

🌟 Implemented Components and Hooks

Component Name	Description	Documentation Link
Typewriter	Typing animation component	📄 Docs
Bubble	Bubble message component (extended)	📄 Docs
BubbleList	Bubble message list (extended)	📄 Docs
Welcome	Welcome component	📄 Docs
Sender	Smart input (with voice interaction、Built in instruction operation)	📄 Docs
MentionSender	Instruction input box (mention list)	📄 Docs
Thinking	Thinking state component (extended)	📄 Docs
ThoughtChain	Thought chain component	📄 Docs
useRecord	Browser built-in speech recognition hooks	📄 Docs
useXStream	Streaming API hooks	📄 Docs
useSend & XRequest	Split streaming hooks (extended)	📄 Docs

🎯 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

🤝 Contribute

1. Fork the repository → 2. Create a Feature branch → 3. Submit a Pull Request

Details can be moved 👉 Development Guide

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: