---
title: "@eigenpal/docx-editor-vue"
description: "The Vue 3 adapter for docx-editor. It exposes DocxEditor, Vue composables, and UI components under /ui."
category: "Packages"
order: 40
---

<PackageStats name="@eigenpal/docx-editor-vue" />

## Status

`@eigenpal/docx-editor-vue` targets Vue 3 and is released in the same fixed version group as the React package. It keeps the same component name, subpath layout, and plugin contract where Vue supports the same surface. Remaining gaps are tracked in the parity contract below.

## Install

```bash
npm install @eigenpal/docx-editor-vue
```

Pulls in `@eigenpal/docx-editor-core` and `@eigenpal/docx-editor-i18n`.

## Quickstart

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';

const buf = ref<ArrayBuffer | null>(null);
</script>

<template>
  <DocxEditor :document-buffer="buf" />
</template>
```

## Using with Nuxt

For Nuxt 3 and 4, install [`@eigenpal/nuxt-docx-editor`](/docs/1.x/vue/nuxt), the official Nuxt module. It wraps this adapter and auto-imports an SSR-safe `<DocxEditor>`, so there's no `<ClientOnly>` wrapper to write:

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@eigenpal/nuxt-docx-editor'],
});
```

See [Nuxt](/docs/1.x/vue/nuxt) for the module options and what to import from the adapter directly.

## Subpaths

- `@eigenpal/docx-editor-vue`: `<DocxEditor>`, `DocxEditorProps`, `DocxEditorRef`, `EditorMode`, `renderAsync`, `i18nPlugin`, `provideLocale`
- `@eigenpal/docx-editor-vue/ui`: `Toolbar`, `EditorToolbar`, `ResponsiveToolbar`, `TableToolbar`, `MenuBar`, `TitleBar`, `ColorPicker`, `FontPicker`, `StylePicker`, and the dialog components (find/replace, hyperlink, page setup, table properties, and more)
- `@eigenpal/docx-editor-vue/composables`: Vue equivalents of the React hooks (`useDocxEditor`, `useHistory`, `useAutoSave`, `useTrackedChanges`, `useFindReplace`, etc.)
- `@eigenpal/docx-editor-vue/dialogs`: hyperlink, find/replace, paste special, page setup
- `@eigenpal/docx-editor-vue/plugin-api`: plugin host
- `@eigenpal/docx-editor-vue/styles`: CSS

Every export is in the [Vue API reference](/docs/1.x/api/vue).

## Parity with React

`scripts/parity/parity.contract.json` lists every public prop and ref member shipped under either adapter, grouped as paired, deferred-in-Vue, or adapter-specific. CI parses both packages' API snapshots and fails when the contract changes without an update. Deferred-in-Vue items today include the `agentPanel` prop, the controlled `comments` prop, `onSave`/`onFontsLoaded`/clipboard callbacks, and the plugin overlay surface. Items in the paired bucket are expected to behave the same in both adapters.

## Agent integration

Same toolkit, Vue subpath:

```ts
import { useAgentBridge } from '@eigenpal/docx-editor-agents/vue';

const { executeToolCall, toolSchemas } = useAgentBridge({
  editorRef,
  author: 'Assistant',
});
```

Use the composable instead of the React hook. The server route can still use `@eigenpal/docx-editor-agents/ai-sdk/server`. The React-only `agentPanel` prop has no Vue equivalent yet; render the chat UI components next to the editor (see [Vue examples](/docs/1.x/vue/examples)).

## Next steps

- [Vue API reference](/docs/1.x/api/vue)
- [Migration: 0.x → 1.x](/docs/1.x/migration) if you ran the React adapter inside a Vue wrapper before
- [Plugins](/docs/1.x/plugins)
