# @assistant-ui/vue 中文文档

规范地址：https://npmcn.com/package/%40assistant-ui/vue/

版本：0\.0\.7
npm 元数据更新时间：2026-10-28T00:51:03.879Z
中文译文更新时间：2026-11-07T00:32:42.104Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40assistant-ui/vue
原文对照：https://npmcn.com/package/%40assistant-ui/vue/?lang=original
项目主页：https://www.assistant-ui.com/
源码仓库：https://github.com/assistant-ui/assistant-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：594 kB，233 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：vue ^3\.5\.0，@types/react \*
- 首次发布：2026-10-06T04:17:40.436Z
- 最新版本发布：2026-10-28T00:51:03.493Z
- 近 30 天下载量：4376（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 9 个）

## 中文简介

助理- ui 装订

## 安装

```sh
npm install @assistant-ui/vue
```

也可以使用：`pnpm add @assistant-ui/vue`、`yarn add @assistant-ui/vue`、`bun add @assistant-ui/vue`

## README

# `@assistant-ui/vue`

[![npm version](https://img.shields.io/npm/v/@assistant-ui/vue)](https://www.npmjs.com/package/@assistant-ui/vue) [![npm downloads](https://img.shields.io/npm/dm/@assistant-ui/vue)](https://www.npmjs.com/package/@assistant-ui/vue) [![GitHub stars](https://img.shields.io/github/stars/assistant-ui/assistant-ui)](https://github.com/assistant-ui/assistant-ui) ![License](https://img.shields.io/npm/l/@assistant-ui/vue)

给助手的装订 在Vue 和 Nuxt 中流出 AI 聊天的提供者、 可调合器和未风格的原始设备,运行时间与运行时间相同 `@assistant-ui/react`。 。 。 .

## 安装

需要 Vue 3.5 或更新.

```bash
npm install @assistant-ui/vue @assistant-ui/ai-sdk ai react
```

`@assistant-ui/ai-sdk` 连接 [AI SDK 软件](https://ai-sdk.dev/)它在共享运行时间运行AI SDK的聊天状态,所以它需要 `react` 安装, 即使 React 却一无所获.

## 使用量

```vue
<!-- app/components/Assistant.client.vue -->
<script setup lang="ts">
import {
  AuiConfig,
  AuiProvider,
  ComposerPrimitiveInput,
  ComposerPrimitiveSend,
  MessagePrimitiveParts,
  ThreadPrimitiveMessages,
  ThreadPrimitiveViewport,
} from "@assistant-ui/vue";
import { AISDKChat } from "@assistant-ui/ai-sdk";

const config = AuiConfig({ threads: AISDKChat() });
</script>

<template>
  <AuiProvider :config="config">
    <ThreadPrimitiveViewport class="h-dvh overflow-y-auto">
      <ThreadPrimitiveMessages>
        <MessagePrimitiveParts />
      </ThreadPrimitiveMessages>
    </ThreadPrimitiveViewport>
    <ComposerPrimitiveInput placeholder="Message..." />
    <ComposerPrimitiveSend>Send</ComposerPrimitiveSend>
  </AuiProvider>
</template>
```

`AISDKChat()` 员额 `/api/chat`,返回的路径 `streamText(...).toUIMessageStreamResponse()`。仅将提供者客户端挂载为 `.client.vue` 在 Nuxt 中的组件: Vue 的服务器渲染器从不处理效果范围,所以在服务器上提供的提供者会保留每个请求一次运行时间.

样式化的组件(线程、消息、推理、工具呼叫、线程列表)从助理用户注册处安装 [快速启动](https://www.assistant-ui.com/docs/vue/quickstart) 穿过它们.

## API 密码

-   `AuiProvider` 拥有从一个 `AuiConfig`· ; `AuiIf` 在状态选择器返回时使其槽变为真实.
-   `useAui()` 返回一个稳定的客户端,其范围访问器会解决提供者当前客户端的问题. `useAuiState(selector)` 返回选定切片更改时的更新. `useAuiEvent(event, callback)` 订阅当前效果范围的寿命 .
-   原始覆盖线条( E)`ThreadPrimitiveRoot`, (中文(简体) ), `Messages`, (中文(简体) ), `Viewport`, (中文(简体) ), `ViewportFooter`, (中文(简体) ), `ScrollToBottom`, (中文(简体) ), `Suggestions`),信息(`MessagePrimitiveRoot`, (中文(简体) ), `Parts`, (中文(简体) ), `Attachments`),作曲家(`ComposerPrimitiveInput`, (中文(简体) ), `Send`, (中文(简体) ), `Cancel`, (中文(简体) ), `Attachments`, (中文(简体) ), `AddAttachment`, (中文(简体) ), `AttachmentDropzone`),附件,分支拾取器,动作栏,建议,出错,思维链,以及线程列表,每个线程列表以全名导出,例如: `ThreadPrimitiveMessages`。 。 。 .
-   通过已注册的 Vue 组件提供工具调用 `Tools({ toolkit })` 或者说 `aui.tools.setToolUI`,获得单笔 `tool` 道具类型 `ToolUIProps`; 与 React app 共享的工具包中的回放渲染器不会在Vue中渲染出.

## 没有AI SDK

运行一个不需要反应的运行时间, 例如安装在 `RuntimeAdapter` 从 `@assistant-ui/core/store`,别名 `react` 改为 `@assistant-ui/tap/standalone-shim` 因此共享运行时代码解析而不安装 React :

```ts
// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      "react/compiler-runtime": "@assistant-ui/tap/standalone-shim/compiler-runtime",
      react: "@assistant-ui/tap/standalone-shim",
    },
  },
});
```

## 文档

-   [开始](https://www.assistant-ui.com/docs/vue)
-   [快速启动](https://www.assistant-ui.com/docs/vue/quickstart)
-   [运行时间](https://www.assistant-ui.com/docs/vue/runtimes)
-   [服务器渲染](https://www.assistant-ui.com/docs/vue/ssr)
-   [工具用户界面](https://www.assistant-ui.com/docs/vue/tool-ui)

## 其他平台

-   有反应的 Web : [`@assistant-ui/react`](https://www.npmjs.com/package/@assistant-ui/react)
-   原生反应 : [`@assistant-ui/react-native`](https://www.npmjs.com/package/@assistant-ui/react-native)
-   终端 : [`@assistant-ui/react-ink`](https://www.npmjs.com/package/@assistant-ui/react-ink)

## 常见问题

### @assistant-ui/vue 是什么？

助理- ui 装订

### 如何安装 @assistant-ui/vue？

在项目目录运行 npm install @assistant-ui/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）、@types/react（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @assistant-ui/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @assistant-ui/vue 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @assistant-ui/vue 可以商用吗？

@assistant-ui/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @assistant-ui/vue 的下载量有多少？

根据 npm 官方下载统计，@assistant-ui/vue 在 2026/10/07 – 2026/11/05 这 30 天内被下载 4,376 次，日均约 146 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @assistant-ui/vue 还在维护吗？

最新版本 0\.0\.7 发布于 2026/10/28（10 天前）；至今共发布 9 个版本，其中过去 12 个月发布了 9 个；首次发布于 2026/10/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。