# @chai-ui/vue 中文文档
规范地址：https://npmcn.com/package/%40chai-ui/vue/
版本：1\.4\.1
npm 元数据更新时间：2026-10-30T21:30:44.108Z
中文译文更新时间：2026-11-09T09:22:13.065Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40chai-ui/vue
原文对照：https://npmcn.com/package/%40chai-ui/vue/?lang=original
项目主页：https://chai-ui.com/
源码仓库：https://github.com/kazarazat/chai-ui
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：856 kB，107 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue ^3\.5\.0
- 首次发布：2026-10-09T20:30:55.434Z
- 最新版本发布：2026-10-30T21:30:43.709Z
- 近 30 天下载量：3723（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 24 个）
## 中文简介
柴联航 Vue组件——智能,滴入的AI应用程序UI:作曲器,媒体分析器,结果卡,编辑卡,侧面面板,和使用Composer可相容.
## 安装
```sh
npm install @chai-ui/vue
```
也可以使用：`pnpm add @chai-ui/vue`、`yarn add @chai-ui/vue`、`bun add @chai-ui/vue`
## README
[](https://chai-ui.com/)
[](https://www.npmjs.com/package/@chai-ui/vue) [](https://github.com/kazarazat/chai-ui/blob/main/LICENSE) [](https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml) [](https://codecov.io/gh/kazarazat/chai-ui) [](https://chai-ui.com/docs/)
# @chai-ui/vue (英语)
Chai UI for Vue:用于输入和输出表面的滴入组件 generative-media apps:一个即时作曲家,一个媒体对即时分析器,一个结果卡和一个 编辑卡片,其中人工智能作品由Fal.ai、OpenRouter、Vercel所建并连接 AI网关或你自己的引擎. 一切都被控制着: 你拥有国家 `v-model`,组件就让它.
这些组件与 [`@chai-ui/react`](https://www.npmjs.com/package/@chai-ui/react) 财务报告和审定财务报表 [`@chai-ui/svelte`](https://www.npmjs.com/package/@chai-ui/svelte), (中文(简体) ), 同样的行为。 三层都是薄的 `@chai-ui/core` 并运行一个共用测试套房,包括WCAG 2.2 AA 检查(轴、键盘和焦点).
用它来建还是用编码剂来指向它? 读取 [`DESIGN.md`](https://npmcn.com/package/%40chai-ui/vue/DESIGN.md) (包裹中)用于使用规则, 和文档网站 [`llms.txt`](https://chai-ui.com/docs/llms.txt) 页:1 aPI (英语). 打开密码盒 [chai-ui.com/docs (英语)](https://chai-ui.com/docs) 在React、Vue和Svelte之间切换.
## 安装
```sh
pnpm add @chai-ui/vue @chai-ui/core @chai-ui/tokens
```
Vue 3.5或后期,包括了Nuxt. 无"柴"具体建设设置.
```ts
// main.ts: tokens first, then the component styles that read them
import "@chai-ui/tokens/css";
import "@chai-ui/vue/style.css";
```
### 您的字体
`style.css` 装入"机器人","材料设计"3的打字机. 如果你的应用有它 自定义字体, 导入 `@chai-ui/vue/style-without-fonts.css` 改为: 相同的样式,没有Roboto),并将组件指向您的字体:
```css
:root { --chai-type-family-material: "Your Font", system-ui, sans-serif; }
```
### 黑暗主题
组件有一个黑暗的主题。 选入: 设置 `data-chai-theme="dark"` 打开 ``,或者在任何元素上,以及其中的每个组件开关.
```html
```
柴不照系统设置,因为你的应用决定了 其主题。 随之而来,凌驾于单一的颜色和黑暗的价值观之上 他们自己在 [`@chai-ui/tokens` 读取](https://github.com/kazarazat/chai-ui/tree/main/packages/tokens#dark-theme)。 。 。 .
## 快开始
```vue
```
在建立供货商之前先试一下 别管了 `engine` 财务报告和审定财务报表 `ChaiProvider`: 然后每件事物都运行在内置模拟上,没有网络 电话和没有钥匙.
## Vue 名称
道具是React的 有Vue的约定:
| 反应 | 阴道 |
| --- | --- |
| `value` + 键 `onChange` | `v-model` |
| `x` + 键 `onXChange` | `v-model:x`,比如说. `v-model:attachments`, (中文(简体) ), `v-model:model-id`, (中文(简体) ), `v-model:regions` |
| `onSubmit`, (中文(简体) ), `onAction`, (中文(简体) ), `onEnhance`, (中文(简体) ), `onAbort` | `@submit`, (中文(简体) ), `@action`, (中文(简体) ), `@enhance`, (中文(简体) ), `@abort` |
| `useComposer` 编号 : `useMediaAnalyzer` 钩子 | 可堆叠返回 refs; 通过更改选项的获取器 |
| `` | `edit`'一个接一个地块,与 `@update:active-version` 财务报告和审定财务报表 `@update:regions` |
| `SidePanel`是因为 `open` + 键 `onOpenChange`, (中文(简体) ), `logo` 财务报告和审定财务报表 `footer` | `v-model:open`,则 `#logo` 财务报告和审定财务报表 `#footer` 槽数(`footer` 也获取文本) |
| 作曲器芯片或菜单项 `icon` | 构成部分 |
有些控件只用收听器显示, 如 React: 优化按钮 与 `@enhance`中,请停止 `@abort`模式菜单中 `@update:model-id`。 。 。 .
锁上酒吧? 设定 `menu-placement="above"` 对于固定在下方的栏 屏幕,或 `"below"` 一个固定到顶端, 所以每个菜单打开 输入页面。 左出,这是 `"auto"`:每个菜单都符合它的位置.
## 包裹里有什么
- **`Composer`**: 即时、附件、使用大小写、模型和方正度 菜单,包含建议的模型,快速优化,自动选择路由, 停止并重试.
- **`MediaAnalyzer`** + 键 **`useMediaAnalyzer`**: 媒体在,a 即时发射.
- **`ResultCard`**: 一个提示的结果, 页面,有选票,重试, 下载、分享、细节、流出文本和质量检查标记(来自 您的后端,或者选入法官: `useComposer({ judgeModel, judgeChecks })`) (中文(简体) ).
- **分析:** `@event` 每个组成部分都报告 人会看到,一个 `ChaiEvent` 每个分析工具: `@event="(e) => posthog.capture(e.name, e.properties)"`。 。 。 .
- **`EditCard`**: 标明有自己指示的区域,以及每个区域 编辑为新版本.
- **`SidePanel`**: 页面旁边的面板, 有作曲家及其 答案,关于页面的问题(可选入) `page-context`,显示为 可移动芯片)或其他任何东西,带有即时提示,推取或重叠,以及 无论是哪一方。 和React一样的道具,用 `v-model:open`· ; `#logo` 财务报告和审定财务报表 `#footer` 插槽 。 见反应 README的"一个侧面板"用于细节.
- **`useComposer`**, (中文(简体) ), **`ChaiProvider`**,则 `Toggle`, (中文(简体) ), `SearchMenu` 财务报告和审定财务报表 `Pagination` 组件.
- 引擎和类型来自 `@chai-ui/core`,再出口.
## 您的 API 密钥留在您的服务器上
引擎调用您服务器上的一条路由, 它添加了密钥 。 在 Nuxt 中 :
```ts
// server/api/chai/[...path].ts
import { createChaiHandler } from "@chai-ui/core/server";
const chai = createChaiHandler();
export default defineEventHandler((event) => chai.handle(toWebRequest(event)));
```
准备 `FAL_KEY`, (中文(简体) ), `OPENROUTER_API_KEY` 或者说 `AI_GATEWAY_API_KEY` 在您的服务器上。 其他服务器, 财务报告和审定财务报表 `authorize` 财务报告和审定财务报表 `allowedModels` 用于生产,在 [`@chai-ui/core` 读取](https://github.com/kazarazat/chai-ui/tree/main/packages/core#the-server-route-chai-uicoreserver)。 。 。 .
## 没有服务器路由
在没有服务器路径的桌面应用程序( Tauri, Electron) 中, 写入引擎 他们都跑到你的应用程序的后端 传过来 `useComposer({ engine: desktopEngine })` 转至 ``编辑 [`@chai-ui/core` 读取](https://github.com/kazarazat/chai-ui/tree/main/packages/core#without-a-server-route) 有个Tauri的例子,语音输入,还有Stop在那里做什么.
## 常见问题
### @chai-ui/vue 是什么？
柴联航 Vue组件——智能,滴入的AI应用程序UI:作曲器,媒体分析器,结果卡,编辑卡,侧面面板,和使用Composer可相容\.
### 如何安装 @chai-ui/vue？
在项目目录运行 npm install @chai-ui/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @chai-ui/vue 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @chai-ui/vue 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @chai-ui/vue 可以商用吗？
@chai-ui/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @chai-ui/vue 的下载量有多少？
根据 npm 官方下载统计，@chai-ui/vue 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,723 次，日均约 124 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @chai-ui/vue 还在维护吗？
最新版本 1\.4\.1 发布于 2026/10/31（9 天前）；至今共发布 24 个版本，其中过去 12 个月发布了 24 个；首次发布于 2026/10/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。