@desource/context7-widget-vue

中文文档

0.2.3发布于 2026/11/01MITTypeScriptES Module构建来源已验证近 30 天下载 1.7万

本地 Vue 3 组件和可自定义的 Context7 文档聊天部件 .

文档目录15 节

为什么要使用这个部件 ?
你得到的东西
开始前
安装
构成部分
可编曲
实例
插件
受控开放状态
触发模式
自定义
道具和事件
数据流动与隐私
多个部件包装
相关软件包

上下文7 Docs 聊天,为您的 Vue app 风格。使用您的字体、颜色和帮助按钮,带有本地组件,并具有用于打开用户界面聊天的可容性.

上下文7提供了其文件部件并免费托管了 AI 答案。这个项目在服务周围添加一个自定义的界面 .

一个文件助理应该适合周围的网站。此软件包将扩展官方上下文7 部件的基本视觉选项, 有预设, CSS 变量, 自定义触发器,以及灵活的布局。访客得到多行问题,可复制代码, 停止并重试控制器,然后聊天,让它们回滚并读取.

已经使用正式部件了吗 ? 切换脚本 URL 或使用下面的 Vue 组件与您现有的 Contexe7 库。新建为 7号背景? 在访问者评估您的库和开始他们的第一次融合.

你得到的东西

一个本地人 Context7Widget 包含打入道具和事件.
A 类 useContext7Widget 用于控件和应用程序默认的可堆肥和插件 .
用于自己按钮内容的触发槽,加上外部触发支持.
共享部件样式 styles.css 和每个软件包一样的核心行为.

开始前

使用您在背景7上声称的图书馆。在其 管理 – 聊天 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 /owner/repo 以该图书馆的编号为例。图书馆仅索引无法在您的网站上聊天 . 见背景7 的部件设置。。。 .

安装

npm install @desource/context7-widget-vue

在应用程序条目中导入样式表一次 :

import '@desource/context7-widget-vue/styles.css';

在Nuxt中,相应的全球设置是:

export default defineNuxtConfig({
  css: ['@desource/context7-widget-vue/styles.css']
});

构成部分

<script setup lang="ts">
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

function trackQuestion(detail: Context7WidgetQuestionEventDetail) {
  console.log(detail.library, detail.question);
}
</script>

<template>
  <Context7Widget library="/owner/repo" position="anchor" preset="glass" theme="auto" @question="trackQuestion" />
</template>

可编曲

<script setup lang="ts">
import { useContext7Widget } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

const docs = useContext7Widget({
  autoMount: true,
  library: '/owner/repo',
  position: 'center',
  preset: 'terminal',
  widgetId: 'docs'
});

async function ask() {
  await docs.send('How do I customize the widget?');
  console.log(docs.isOpen.value, docs.isBusy.value, docs.messages.value);
}
</script>

<template>
  <button type="button" @click="ask">Ask documentation</button>
</template>

所有者挂起后自动挂起。打电话 send, (中文(简体) ), open,以及来自事件处理器或部件准备好后的其他控件.

可混凝土暴露出反应性 widget, (中文(简体) ), isOpen, (中文(简体) ), isBusy,以及 messages 裁判员加 mount, (中文(简体) ), unmount, (中文(简体) ), open, (中文(简体) ), close, (中文(简体) ), toggle, (中文(简体) ), send, (中文(简体) ), cancel, (中文(简体) ), retry, (中文(简体) ), reset,以及 getMessages。。。 . mount(overrides) 也更新一个已拥有部件,当反应源选项时,这些覆盖仍然有效变化。拥有的部件与所有者一起被默认删除; 设定 removeOnUnmount: false 只有当应用程序的另一部分将拥有清理. 调用组件时的可调用 setup; 必要事项 mount() 实值只有浏览器。程序化制成的部件继承所有者应用程序上下文和默认由 createContext7WidgetPlugin。。。 .

无 autoMount,可堆肥使用包级登记册而不是 Vue 或 DOM 祖传. 它解决了最新注册 widgetId,哪个默认为 default; 如果没有默认的注册, 则查找会退后到第一个可用的部件。复制 IDs 构成堆栈, 因此卸载最新注册恢复了先前的注册.

实例

使用 v-model:open 当父母拥有可见度时 :

<script setup lang="ts">
import { ref } from 'vue';
import { Context7Widget } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

const open = ref(false);
</script>

<template>
  <Context7Widget v-model:open="open" library="/owner/repo" position="center" preset="glass" backdrop custom-trigger />
</template>

使用 useContext7Widget({ autoMount: true }) 用于路径动作,命令调色板,或其他必需的流. 可用模式页:1 演示画廊。。。 .

插件

在自定义名称下注册本地组件并提供全应用程序默认值:

import { createApp } from 'vue';
import { createContext7WidgetPlugin } from '@desource/context7-widget-vue';

createApp(App)
  .use(
    createContext7WidgetPlugin({
      componentName: 'DocsWidget',
      defaults: {
        preset: 'glass',
        theme: 'auto'
      }
    })
  )
  .mount('#app');

默认由已制成的Vue组件和可混合自有部件继承; 插件不会创建第二个部件。插件选项在插件被创建, 因此在以后更改原选项对象时不会更改已安装应用程序行为 .

受控开放状态

奥米 open 初始状态 defaultOpen启用 v-model:open 当父目录拥有能见度 :

<Context7Widget v-model:open="docsOpen" library="/owner/repo" />

组件释放 update:open 作为受控状态请求. open 财务报告和审定财务报表 close 只有在实际过渡后才发出生命周期通知.

触发模式

<!-- Built-in floating launcher -->
<Context7Widget library="/owner/repo" />

<!-- Vue renders a package-managed button -->
<Context7Widget library="/owner/repo" custom-trigger launcher-label="Ask docs" />

<!-- Vue renders the button, you control its markup -->
<Context7Widget library="/owner/repo" custom-trigger>
  <template #trigger="{ label }">
    <span class="docs-dot" />
    <span>{{ label }}</span>
  </template>
</Context7Widget>

<!-- Bind to a button anywhere by id, with or without # -->
<button id="docs-help">Ask docs</button>
<Context7Widget library="/owner/repo" custom-trigger="docs-help" />

<!-- Full CSS selectors are supported too -->
<button class="docs-help">Ask docs</button>
<Context7Widget library="/owner/repo" custom-trigger=".docs-help" />

<!-- Vue refs and direct Elements are supported for external triggers -->
<button ref="docsHelp">Ask docs</button>
<Context7Widget library="/owner/repo" :custom-trigger="docsHelp" />

外部自定义触发器在捆绑后才会隐藏 Vue 浮动发射器. 缺少或延迟交付的选择器使发射机随时可用并捆绑目标出现时自动.

自定义

Vue 组件将本地 Vue DOM 置于 .context7-widget;没有挂载核心自定义元素。以共享 CSS 变量自定义 :

.context7-widget[widget-id='docs'] {
  --c7-accent: #7cffb2;
  --c7-panel-background: #101513;
  --c7-panel-color: #f7f2e8;
  --c7-border-color: rgba(247, 242, 232, 0.18);
  --c7-panel-radius: 8px;
}

.context7-widget [part~='send-button'] {
  min-width: 5rem;
  text-transform: uppercase;
}

.context7-widget-trigger {
  --c7-trigger-background: #111827;
  --c7-trigger-border: rgba(255, 255, 255, 0.16);
  --c7-trigger-color: #f8fafc;
  --c7-trigger-focus: rgba(124, 255, 178, 0.42);
  --c7-trigger-radius: 8px;
  --c7-trigger-shadow: none;
}

见实时定制指南每一个公共标志和部分.

道具和事件

组件接受与核心包相同的公共部件选项: library, (中文(简体) ), theme, (中文(简体) ), preset, (中文(简体) ), position, (中文(简体) ), color, (中文(简体) ), customTrigger, (中文(简体) ), backdrop, (中文(简体) ), closeOnOutsideClick, (中文(简体) ), defaultOpen, (中文(简体) ), initialMessage, (中文(简体) ), labels, (中文(简体) ), launcherLabel, (中文(简体) ), launcherVariant, (中文(简体) ), linkBaseUrl, (中文(简体) ), panelHeight, (中文(简体) ), panelWidth, (中文(简体) ), placeholder, (中文(简体) ), title,以及 widgetId。。。 .

使用 labels 每个可见和辅助字符串的部分本地化, 包括归属和图书馆倒置. Context7WidgetLabels 导出用于输入词典. 相对 Markdown 链接解析与上下文 7 库页面相对,除非 linkBaseUrl 提供文件来源.

默认与核心共享 : position="bottom-right", (中文(简体) ), preset="default", (中文(简体) ), theme="auto", (中文(简体) ), launcher-variant="icon",以及 widget-id="default"。一个居中部件启用背景, 除非 :backdrop="false" 很明显.

Vue唯一的道克级差异是 customTrigger数字 :

数值	行为
删除	将内置的浮起式发射器
`true`	把Vue 管理的触发器打开并曝光触发槽
id 字符串	用 id 绑住外部触发器, 无论是否 `#`
CSS 选择器	绑住第一个匹配的外部触发器
要素/剩余	绑定提供的外部触发元素

类似事件 : ready, (中文(简体) ), open, (中文(简体) ), close, (中文(简体) ), cancel, (中文(简体) ), question, (中文(简体) ), first-token, (中文(简体) ), answer, (中文(简体) ), answer-complete, (中文(简体) ), tool-call, (中文(简体) ), tool-result, (中文(简体) ), error,以及 update:open。。。 .

每个处理器都会收到被打出的事件细节作为其唯一的参数.

构成部分参考员曝光 open, (中文(简体) ), close, (中文(简体) ), toggle, (中文(简体) ), send, (中文(简体) ), cancel, (中文(简体) ), retry, (中文(简体) ), reset, (中文(简体) ), isOpen, (中文(简体) ), isBusy, (中文(简体) ), getMessages,以及 subscribe。可堆肥添加拥有 mount编号 :unmount 业务和反应 widget, (中文(简体) ), isOpen, (中文(简体) ), isBusy, (中文(简体) ), 财务报告和审定财务报表 messages 裁判员。通过下列程序注册的国家听众 subscribe 为: 孤立: 如果丢出一个, 错误报告而不损坏请求或者跳过剩下的听众。答题后取消在 getMessages() 与 status: 'cancelled'。。。 . send() 以状态结果解决,例如 complete, (中文(简体) ), cancelled, (中文(简体) ), error, (中文(简体) ), busy,或 empty。。。 .

当响应流时, 发送动作变为已启用 停下来 行动. 作曲者接受多行/ 编码- 粘贴输入: 输入发送和 Shift+ 输入插入新行。可复制已完成的答案和有栅栏的代码块传输错误显示重试动作而不重复问题 . 内置和外部触发器都收到 aria-controls, (中文(简体) ), aria-haspopup="dialog"同步 aria-expanded; 属性为外部触发器在未绑定时恢复。居中对话框陷阱焦点、使外部内容惰性、锁定页面滚动, 而非模式转角和抛锚面板没有.

构成部分是安保部门安全. useContext7Widget 也可以在安全部门改革期间创建, 但必须 mount() 方法需要浏览器文档.

数据流动与隐私

浏览器会发布已配置的库 ID 和当前对话信件直接转到 https://context7.com/api/v2/widget/chat源代码实验室没有代理聊天内容。该套件没有添加分析、饼干或持久性浏览器存储; 对话状态一直保存在挂载部件中直至 reset() 或卸载。事件有效载荷暴露出对主机应用程序,所以任何记录、分析或持久性都添加到集成器数据流. 不发送机密或敏感个人资料,以及审查背景7的后端处理和保留政策.

多个部件包装

使用一个独特的 widgetId 用于每个独立控制的部件。复制时身份证是故意挂载的,最近挂载的个案得到解决如果更新一个卸载,则前一个实例会再次激活.

软件包暴露了一个JavaScript条目, @desource/context7-widget-vue,包含组件,可堆肥,插件, 和大众类型。样式在 @desource/context7-widget-vue/styles.css; 没有组件或可堆肥 JavaScript 子路径. 日内瓦 @desource/context7-widget/kit 保持外部状态模块依赖性,允许耗用应用程序去除 Vue 和树震未用工具包模块。无害环境管理条目和申报为安全部门改革进口用现代节点无害环境管理和TypeScript捆绑器分辨率进行安全验证.

@desource/context7-widget 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.
@desource/context7-widget-nuxt 为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值.
@desource/context7-widget-react 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.
@desource/context7-widget-svelte 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器.
@desource/context7-widget-angular 提供独立的Angular组件,信号,应用程序默认,以及可注射控制.

版本与发布记录

@desource/context7-widget-vue 共发布 5 个版本，首次发布于 2026/09/10；过去 12 个月发布了 5 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`0.2.3`latest	2026/11/01	11 天前
`0.2.2`	2026/10/10	1 个月前
`0.2.1`	2026/10/01	1 个月前
`0.2.0`	2026/09/14	1 个月前
`0.1.0`	2026/09/10	2 个月前

关于 @desource/context7-widget-vue 的常见问题

@desource/context7-widget-vue 是什么？

本地 Vue 3 组件和可自定义的 Context7 文档聊天部件 .

如何安装 @desource/context7-widget-vue？

在项目目录运行 npm install @desource/context7-widget-vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3.5.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@desource/context7-widget-vue 支持 TypeScript 吗？

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

@desource/context7-widget-vue 支持 ESM 还是 CommonJS？

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

@desource/context7-widget-vue 可以商用吗？

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

@desource/context7-widget-vue 的下载量有多少？

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

@desource/context7-widget-vue 还在维护吗？

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

npm install @desource/context7-widget-vue

pnpmpnpm add @desource/context7-widget-vue
yarnyarn add @desource/context7-widget-vue
bunbun add @desource/context7-widget-vue

peer 依赖vue ^3.5.0

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

17,097

约 1.7万次日均 570 次

统计周期 2026/10/12 – 2026/11/10
数据来自 npm 官方下载统计，今天更新

最新版本0.2.3发布于 11 天前

开源许可MIT宽松许可

包体积96.1 kB8 个文件 · 解压后

运行依赖1 个另有 1 个 peer 依赖

模块格式ES Module

TypeScript自带类型

发布版本5 个近 12 个月 5 个

首次发布2026/09/102 个月前

元数据更新2026/11/01

每一个软件包背后，
都有分享与创造的人。