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

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

为什么要使用这个部件 ?

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

更新您的已有脚本 或以相同的库和域设置添加下面的模块。 新建为 7号背景? 帮助访问者探索您的图书馆并开始他们的首次整合. 模块再用Vue和共享核心.

开始前

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

安装

pnpm add @desource/context7-widget-nuxt

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

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

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

实例

渲染部件

<template>
  <Context7Widget />
</template>

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

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

控制打开状态

<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 部件按程序挂载在所有者部件挂载后.

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

方案安装:

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

使用自定义触发

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

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

模块选项

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'
    }
  }
});

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

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

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

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

自定义

模块默认设置 :

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 变量和公共部件 :

.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数字 :

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 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.
• @desource/context7-widget-vue 提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.
• @desource/context7-widget-react 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.
• @desource/context7-widget-svelte 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器.
• @desource/context7-widget-angular 提供独立的Angular组件,信号,应用程序默认,以及可注射控制.