@desource/context7-widget-vue

Context7 docs chat, styled for your Vue app. Use your fonts, colors, and help button, with a native component and a composable for opening chat from your UI.

Why Use This Widget?

Context7 provides its docs widget and hosted AI answers for free. This project adds a customizable interface around that service.

A docs assistant should fit the site around it. This package expands the official Context7 widget’s basic visual options with presets, CSS variables, custom triggers, and flexible layouts. Visitors get multiline questions, copyable code, Stop and Retry controls, and chat that lets them scroll back and read.

Already using the official widget? Switch the script URL or use the Vue component below with your existing Context7 library. New to Context7? Add documentation answers where visitors evaluate your library and start their first integration.

What You Get

• A native Context7Widget component with typed props and events.
• A useContext7Widget composable and plugin for controls and app defaults.
• A trigger slot for your own button content, plus external trigger support.
• Shared widget styles in styles.css and the same core behavior as every package.

Before You Start

Use a library you have claimed on Context7. In its Admin → Chat settings, enable the widget, add your site's domain to the allowed domains, and save. Replace /owner/repo in the examples with that library's id. A library being indexed alone does not enable chat on your site. See Context7's widget setup.

Install

npm install @desource/context7-widget-vue

Import the stylesheet once in your application entry:

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

In Nuxt, the equivalent global setup is:

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

Component

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

Composable

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

Automatic mounting happens after the owner mounts. Call send, open, and other controls from an event handler or after the widget is ready.

The composable exposes reactive widget, isOpen, isBusy, and messages refs plus mount, unmount, open, close, toggle, send, cancel, retry, reset, and getMessages. mount(overrides) also updates an existing owned widget, and those overrides remain in effect when reactive source options change. Owned widgets are removed with their owner by default; set removeOnUnmount: false only when another part of the app will own cleanup. Call the composable during component setup; imperative mount() is browser-only. Programmatically rendered widgets inherit the owner app context and defaults provided by createContext7WidgetPlugin.

Without autoMount, the composable uses a package-level registry rather than Vue or DOM ancestry. It resolves the newest registration for widgetId, which defaults to default; if no default registration exists, that lookup falls back to the first available widget. Duplicate ids form a stack, so unmounting the newest registration restores the previous one.

Examples

Use v-model:open when a parent owns visibility:

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

Use useContext7Widget({ autoMount: true }) for route actions, command palettes, or other imperative flows. More runnable patterns are available in the demo gallery.

Plugin

Register the native component under a custom name and provide app-wide defaults:

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

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

Defaults are inherited by rendered Vue components and composable-owned widgets; the plugin does not create a second widget. Plugin options are captured when the plugin is created, so mutating the original options object later does not alter installed application behavior.

Controlled Open State

Omit open for state initialized by defaultOpen. Use v-model:open when the parent owns visibility:

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

The component emits update:open as the controlled-state request. open and close remain lifecycle notifications emitted only after an actual transition.

Trigger Modes

<!-- 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" />

External custom triggers hide the Vue floating launcher only after they bind. Missing or late-rendered selectors keep the launcher available and bind automatically when the target appears.

Customization

The Vue component renders native Vue DOM under .context7-widget; it does not mount the core custom element. Customize it with the shared CSS variables:

.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;
}

See the live customization guide for every public token and part.

Props And Events

The component accepts the same public widget options as the core package: library, theme, preset, position, color, customTrigger, backdrop, closeOnOutsideClick, defaultOpen, initialMessage, labels, launcherLabel, launcherVariant, linkBaseUrl, panelHeight, panelWidth, placeholder, title, and widgetId.

Use labels for partial localization of every visible and assistive string, including attribution and library fallbacks. Context7WidgetLabels is exported for typed dictionaries. Relative Markdown links resolve against the Context7 library page unless linkBaseUrl supplies a documentation origin.

Defaults are shared with core: position="bottom-right", preset="default", theme="auto", launcher-variant="icon", and widget-id="default". A centered widget enables its backdrop unless :backdrop="false" is explicit.

Vue’s only prop-level difference is customTrigger:

Vue events: ready, open, close, cancel, question, first-token, answer, answer-complete, tool-call, tool-result, error, and update:open.

Each handler receives the typed event detail as its only argument.

Component refs expose open, close, toggle, send, cancel, retry, reset, isOpen, isBusy, getMessages, and subscribe. The composable adds owned mount/unmount operations and reactive widget, isOpen, isBusy, and messages refs. State listeners registered through subscribe are isolated: if one throws, the error is reported without corrupting the request or skipping the remaining listeners. Cancelling after answer tokens arrive preserves the visible partial assistant message in getMessages() with status: 'cancelled'. send() resolves with a status result such as complete, cancelled, error, busy, or empty.

While a response streams, the send action becomes an enabled Stop action. The composer accepts multiline/code-paste input: Enter sends and Shift+Enter inserts a newline. Completed answers and fenced code blocks can be copied, and transport errors expose a retry action without duplicating the question. Both built-in and external triggers receive aria-controls, aria-haspopup="dialog", and synchronized aria-expanded; attributes owned by an external trigger are restored when it is unbound. Centered dialogs trap focus, make outside content inert, and lock page scrolling, while non-modal corner and anchored panels do not.

The component is SSR-safe. useContext7Widget can also be created during SSR, but its imperative mount() method requires a browser document.

Data Flow And Privacy

The browser posts the configured library id and current conversation messages directly to https://context7.com/api/v2/widget/chat. DeSource Labs does not proxy chat content. The package adds no analytics, cookies, or persistent browser storage; conversation state remains in the mounted widget until reset() or unmount. Emitted event payloads expose questions and answers to the host application, so any logging, analytics, or persistence added there is the integrator's data flow. Do not send secrets or sensitive personal data, and review Context7's policies for backend processing and retention.

Multiple Widgets And Packaging

Use a unique widgetId for each independently controlled widget. When duplicate ids are mounted intentionally, the most recently mounted instance is resolved and the previous instance becomes active again if the newer one unmounts.

The package exposes one JavaScript entry, @desource/context7-widget-vue, containing the component, composable, plugin, and public types. Styles are intentionally separate at @desource/context7-widget-vue/styles.css; there are no component or composable JavaScript subpaths. Vue and @desource/context7-widget/kit remain external module dependencies, allowing the consuming app to deduplicate Vue and tree-shake unused kit modules. The ESM entry and declarations are SSR-import safe and validated with modern Node ESM and TypeScript bundler resolution.

Related packages

• @desource/context7-widget provides the browser custom element, drop-in script, TypeScript helpers, and shared headless engine.
• @desource/context7-widget-nuxt adds auto-imports, automatic styles, and app-wide defaults for Nuxt 3 and 4.
• @desource/context7-widget-react provides a native React component, controlled open state, a programmatic hook, and custom triggers.
• @desource/context7-widget-svelte provides a native Svelte 5 component, bindable open state, trigger snippets, and a reactive controller.
• @desource/context7-widget-angular provides a standalone Angular component, signals, application defaults, and injectable controls.