# @desource/context7-widget-nuxt 中文文档

规范地址：https://npmcn.com/package/%40desource/context7-widget-nuxt/

版本：0\.2\.3
npm 元数据更新时间：2026-10-31T16:12:28.965Z
中文译文更新时间：2026-11-12T01:38:20.598Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40desource/context7-widget-nuxt
原文对照：https://npmcn.com/package/%40desource/context7-widget-nuxt/?lang=original
项目主页：https://github.com/DeSource-Labs/context7-widget/tree/main/packages/nuxt#readme
源码仓库：https://github.com/DeSource-Labs/context7-widget

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

- 包体积（解压后）：27.3 kB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue ^3\.5\.0，nuxt ^3\.17\.0 \|\| ^4\.0\.0
- 首次发布：2026-09-09T22:04:39.718Z
- 最新版本发布：2026-10-31T16:12:28.651Z
- 近 30 天下载量：16979（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

Nuxt 3 和 Nuxt 4 模块用于本地 Vue Contex7 文档聊天部件 .

## 安装

```sh
npm install @desource/context7-widget-nuxt
```

也可以使用：`pnpm add @desource/context7-widget-nuxt`、`yarn add @desource/context7-widget-nuxt`、`bun add @desource/context7-widget-nuxt`

## README

# @ desource/context7-widget-nuxt (英语)

[![Nuxt](https://img.shields.io/npm/v/@desource/context7-widget-nuxt?color=blue&logo=nuxt)](https://www.npmjs.com/package/@desource/context7-widget-nuxt) [![Coverage](https://codecov.io/gh/DeSource-Labs/context7-widget/branch/main/graph/badge.svg)](https://codecov.io/gh/DeSource-Labs/context7-widget) [![SonarCloud](https://sonarcloud.io/api/project_badges/measure?project=DeSource-Labs_context7-widget&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=DeSource-Labs_context7-widget) [![Ask Context7](https://img.shields.io/badge/Ask%20Context7-059669.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDBINEMxLjc5MDg2IDAgMCAxLjc5MDg2IDAgNFYyNEMwIDI2LjIwOTEgMS43OTA4NiAyOCA0IDI4SDI0QzI2LjIwOTEgMjggMjggMjYuMjA5MSAyOCAyNFY0QzI4IDEuNzkwODYgMjYuMjA5MSAwIDI0IDBaIiBmaWxsPSIjRjdGMkU4IiBmaWxsLW9wYWNpdHk9IjAuNjUiLz4KPHBhdGggZD0iTTEwLjYgMTUuMjk5MkMxMC42IDE3LjQ5OTIgOS43MDAwNSAxOS4zOTkyIDguMjAwMDUgMjEuMDk5MkgxMS42VjIyLjc5OTJINi4zMDAwNVYyMS4xOTkyQzguMDAwMDUgMTkuMzk5MiA4LjYwMDA1IDE3Ljg5OTIgOC42MDAwNSAxNS4yOTkySDEwLjZaTTE3LjQgMTUuMjk5MkMxNy40IDE3LjQ5OTIgMTguMyAxOS4zOTkyIDE5LjggMjEuMDk5MkgxNi40VjIyLjc5OTJIMjEuN1YyMS4xOTkyQzIwIDE5LjM5OTIgMTkuNCAxNy44OTkyIDE5LjQgMTUuMjk5MkgxNy40Wk0xMC42IDEyLjY5OTJDMTAuNiAxMC40OTkyIDkuNzAwMDUgOC41OTkyMiA4LjIwMDA1IDYuODk5MjJIMTEuNlY1LjE5OTIySDYuMzAwMDVWNi43OTkyMkM4LjAwMDA1IDguNTk5MjIgOC42MDAwNSAxMC4wOTkyIDguNjAwMDUgMTIuNjk5MkgxMC42Wk0xNy40IDEyLjY5OTJDMTcuNCAxMC40OTkyIDE4LjMgOC41OTkyMiAxOS44IDYuODk5MjJIMTYuNFY1LjE5OTIySDIxLjdWNi43OTkyMkMyMCA4LjU5OTIyIDE5LjQgMTAuMDk5MiAxOS40IDEyLjY5OTJIMTcuNFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=)](https://context7.com/desource-labs/context7-widget) [![Ask DeepWiki](https://img.shields.io/badge/Ask%20DeepWiki-1c398e.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0iI2NiY2JjYiIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xOC42IDIwLjFxMS0uNiAyLjItLjZoLjNhNCA0IDAgMCAxIDIgLjdoLjJ2LjFsMSAxaC4xdi4yaC4xbC4xLjF2LjFxLjcgMSAuNyAyLjN0LS42IDIuMnYuMWwtLjIuMkE0IDQgMCAwIDEgMjMgMjhoLS4ydi4xbC0xLjQuNGgtLjVxLTEuMyAwLTIuMy0uNWwtNC4xLTIuNC04LjMgNC44djkuNWw4LjMgNC44IDguMi00LjhWMzVxMC0xLjIuNi0yLjJ2LS4xbC4yLS4yYTQgNCAwIDAgMSAxLjctMS41bDEuMy0uNGguNnExLjMgMCAyLjMuNmw0LjIgMi4zIDguMi00Ljd2LTkuNmwtOC4yLTQuNy00LjIgMi4zcS0xIC42LTIuMi42aC0uM2E0IDQgMCAwIDEtMi0uNmwtLjItLjEtMS0xaC0uMXYtLjJoLS4xbC0uMS0uMnYtLjFxLS43LTEtLjctMi4yVjguMmwtOC4yLTQuNy04LjMgNC43djkuNWw4LjIgNC44eiIvPjwvc3ZnPg==)](https://deepwiki.com/DeSource-Labs/context7-widget) [![License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/DeSource-Labs/context7-widget/blob/main/LICENSE)

向 Nuxt 3 或 4 添加上下文 7 的 docs 聊天, 并设置样式以匹配您的站点 。 这个麻省理工学院的许可模块设置了本地的Vue部件,其样式表,自动导入,以及全应用程序的默认值.

## 为什么要使用这个部件 ?

上下文7提供了其文件部件并免费托管了 AI 答案 。 基础 造型可以让闲聊 寻找出的地方。 这个升级增加了字体,颜色, 自定义触发器, 以及匹配您的站点的布局, 加可复制代码, 多行 输入、 停止和重试 .

[更新您的已有脚本](https://github.com/DeSource-Labs/context7-widget#existing-context7-widget-user) 或以相同的库和域设置添加下面的模块。 新建为 7号背景? 帮助访问者探索您的图书馆并开始他们的首次整合. 模块再用Vue和共享核心.

## 开始前

使用您在背景7上声称的图书馆 。 在其 **管理 – 聊天** 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 `/owner/repo` 以该图书馆的编号为例。 图书馆 仅索引无法在您的网站上聊天 . 见 [背景7 的部件设置](https://context7.com/docs/howto/chat-widget)。 。 。 .

## 安装

```bash
pnpm add @desource/context7-widget-nuxt
```

添加模块并配置文档库一次 :

```ts
export default defineNuxtConfig({
  modules: ['@desource/context7-widget-nuxt'],
  context7Widget: {
    defaults: {
      library: '/owner/repo'
    }
  }
});
```

`Context7Widget` 财务报告和审定财务报表 `useContext7Widget` 现无进口。 样式表是在应用程序 CSS 之前添加的,所以应用程序规则可以覆盖它.

## 实例

### 渲染部件

```vue
<template>
  <Context7Widget />
</template>
```

例如, Propals 覆盖模块默认值 :

```vue
<template>
  <Context7Widget
    library="/owner/another-repo"
    position="anchor"
    preset="glass"
    theme="auto"
    widget-id="nuxt-docs"
    @question="onQuestion"
  />
</template>

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

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

### 控制打开状态

```vue
<script setup lang="ts">
const open = ref(false);
</script>

<template>
  <button type="button" @click="open = true">Ask documentation</button>
  <Context7Widget v-model:open="open" position="center" />
</template>
```

### 使用可混凝土

`useContext7Widget` 可以通过 `widgetId` 或将原生 Vue 部件按程序挂载在所有者部件挂载后.

```vue
<script setup lang="ts">
const docs = useContext7Widget({ widgetId: 'docs' });

async function ask() {
  docs.open();
  await docs.send('How do I configure this module?');
}
</script>

<template>
  <button type="button" @click="ask">Ask</button>
  <Context7Widget widget-id="docs" />
</template>
```

方案安装:

```vue
<script setup lang="ts">
const docs = useContext7Widget({
  autoMount: true,
  library: '/owner/repo',
  preset: 'terminal',
  widgetId: 'programmatic-docs'
});
</script>

<template>
  <button type="button" @click="docs.toggle">Toggle documentation chat</button>
</template>
```

### 使用自定义触发

```vue
<template>
  <Context7Widget custom-trigger launcher-label="Ask docs">
    <template #trigger="{ label }">
      <span>{{ label }}</span>
    </template>
  </Context7Widget>
</template>
```

外部选择器、 Vue ref 和直接 `Element` 触发由 Vue 包描述的工作.

## 模块选项

```ts
export default defineNuxtConfig({
  modules: ['@desource/context7-widget-nuxt'],
  context7Widget: {
    component: true,
    componentName: 'Context7Widget',
    composable: true,
    css: true,
    defaults: {
      library: '/owner/repo',
      preset: 'default',
      theme: 'auto'
    }
  }
});
```

| 选项 | 默认 | 目的 |
| --- | --- | --- |
| `component` | `true` | 自动注册本地 Vue 组件 |
| `componentName` | `Context7Widget` | 更改自动导入组件名称 |
| `composable` | `true` | 自动导入 `useContext7Widget` |
| `css` | `true` | 添加 `@desource/context7-widget-vue/styles.css` 全球 |
| `defaults` | `{}` | 向组件和可堆叠件提供全应用程序部件道具 |

`defaults` 接受可序列化部件道具。 实例道具优先。 已控制 `open` 状态和 DOM 支持 `customTrigger` 值属于组件实例,所以模块类型将其排除在外.

当应用程序以另一种方式导入时, 禁用未使用的集成 :

```ts
export default defineNuxtConfig({
  modules: ['@desource/context7-widget-nuxt'],
  context7Widget: {
    component: false,
    composable: false,
    css: false
  }
});
```

该组件和可堆肥被注册为Nuxt自动进口. Nuxt 仅在使用时将其包括在应用程序块中.

## 自定义

模块默认设置 :

```ts
export default defineNuxtConfig({
  modules: ['@desource/context7-widget-nuxt'],
  context7Widget: {
    defaults: {
      color: '#7cffb2',
      labels: {
        send: 'Ask'
      },
      panelHeight: 'min(42rem, 80vh)',
      panelWidth: 'min(28rem, calc(100vw - 2rem))',
      position: 'bottom-right',
      preset: 'glass',
      title: 'Project documentation'
    }
  }
});
```

覆盖 CSS 应用程序中的 CSS 变量和公共部件 :

```css
.context7-widget[widget-id='docs'] {
  --c7-accent: #7cffb2;
  --c7-panel-background: #101513;
  --c7-panel-color: #f7f2e8;
  --c7-panel-radius: 8px;
}

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

设定 `css: false` 如果应用程序导入 `@desource/context7-widget-vue/styles.css` 自己来.

## 类型脚本

模块选项通过 Nuxt 键入 `context7Widget` 配置密钥 。 从 `@desource/context7-widget-vue`数字 :

```ts
import type {
  Context7WidgetController,
  Context7WidgetProps,
  Context7WidgetQuestionEventDetail,
  UseContext7WidgetReturn
} from '@desource/context7-widget-vue';
```

该模块不重复Vue包的型号导出列表作为全球自动进口. 新的Vue类型仍然可用,没有Nuxt模块变化.

## 安全部门改革行为

本地的Vue部分是安全的安全部门改革,不需要 `ClientOnly`。只浏览器行为从挂载后开始. `useContext7Widget` 可以在服务器设置时创建; 其必须 `mount()` 方法需要浏览器文档.

## 数据流动和隐私

浏览器将配置的库 ID 和当前对话直接发布到 `https://context7.com/api/v2/widget/chat`。模块没有添加代理、分析、饼干或持续存储。 主机应用程序中的事件处理器可以将问答数据暴露于他们所调用的任何记录或分析系统.

## 相关软件包

-   [`@desource/context7-widget`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/core) 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.
-   [`@desource/context7-widget-vue`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/vue) 提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.
-   [`@desource/context7-widget-react`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/react) 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.
-   [`@desource/context7-widget-svelte`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/svelte) 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器.
-   [`@desource/context7-widget-angular`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/angular) 提供独立的Angular组件,信号,应用程序默认,以及可注射控制.

## 常见问题

### @desource/context7-widget-nuxt 是什么？

Nuxt 3 和 Nuxt 4 模块用于本地 Vue Contex7 文档聊天部件 \.

### 如何安装 @desource/context7-widget-nuxt？

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

### @desource/context7-widget-nuxt 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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