0
# @tiptap/vue-3
1

2
@tiptap/vue-3 provides Vue 3 components and composables for building rich text WYSIWYG editors with tiptap. It's a headless wrapper around ProseMirror that offers complete customization while handling complex editor state management through Vue's reactive system.
3

4
## Package Information
5

6
- **Package Name**: @tiptap/vue-3
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tiptap/vue-3 @tiptap/core @tiptap/pm`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  Editor, 
16
  EditorContent, 
17
  useEditor,
18
  NodeViewContent,
19
  NodeViewWrapper,
20
  VueRenderer,
21
  VueNodeViewRenderer,
22
  VueMarkViewRenderer
23
} from "@tiptap/vue-3";
24
```
25

26
For CommonJS:
27

28
```javascript
29
const { 
30
  Editor, 
31
  EditorContent, 
32
  useEditor,
33
  NodeViewContent,
34
  NodeViewWrapper,
35
  VueRenderer,
36
  VueNodeViewRenderer,
37
  VueMarkViewRenderer
38
} = require("@tiptap/vue-3");
39
```
40

41
Menu components:
42

43
```typescript
44
import { BubbleMenu, FloatingMenu } from "@tiptap/vue-3/menus";
45
```
46

47
All @tiptap/core exports are also available:
48

49
```typescript
50
import { Node, Mark, Extension, Command } from "@tiptap/vue-3";
51
```
52

53
## Basic Usage
54

55
```typescript
56
<template>
57
  <div v-if="editor">
58
    <BubbleMenu :editor="editor">
59
      <button @click="editor.chain().focus().toggleBold().run()">Bold</button>
60
    </BubbleMenu>
61
    <EditorContent :editor="editor" />
62
  </div>
63
</template>
64

65
<script setup>
66
import { useEditor, EditorContent } from "@tiptap/vue-3";
67
import { BubbleMenu } from "@tiptap/vue-3/menus";
68
import StarterKit from "@tiptap/starter-kit";
69

70
const editor = useEditor({
71
  content: '<p>Hello World!</p>',
72
  extensions: [StarterKit],
73
});
74
</script>
75
```
76

77
## Architecture
78

79
@tiptap/vue-3 consists of several key components:
80

81
- **Vue 3 Editor Class**: Extends the core tiptap editor with Vue's reactive state management
82
- **Composition API**: `useEditor` composable for lifecycle management
83
- **Component System**: Vue components for rendering editor content and UI elements
84
- **Renderer Classes**: Utilities for creating custom Vue-based node and mark views
85
- **Menu Components**: Pre-built floating and bubble menu components
86
- **Core API Re-exports**: Complete access to all tiptap/core functionality
87

88
## Capabilities
89

90
### Editor Management
91

92
Core editor functionality with Vue 3 reactive state integration. Handles editor lifecycle, content management, and state synchronization.
93

94
```typescript { .api }
95
class Editor extends CoreEditor {
96
  constructor(options?: Partial<EditorOptions>);
97
  get state(): EditorState;
98
  get storage(): Storage;
99
  registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): EditorState;
100
  unregisterPlugin(nameOrPluginKey: string | PluginKey): EditorState | undefined;
101
}
102

103
function useEditor(options?: Partial<EditorOptions>): Ref<Editor | undefined>;
104
```
105

106
[Editor Management](./editor-management.md)
107

108
### Vue Components
109

110
Vue 3 components for rendering editor content and UI elements. Includes content rendering, node view wrappers, and utility components.
111

112
```typescript { .api }
113
const EditorContent: DefineComponent<{
114
  editor: PropType<Editor>;
115
}>;
116

117
const NodeViewContent: DefineComponent<{
118
  as?: PropType<string>;
119
}>;
120

121
const NodeViewWrapper: DefineComponent<{
122
  as?: PropType<string>;
123
}>;
124
```
125

126
[Vue Components](./vue-components.md)
127

128
### Menu Components
129

130
Interactive menu components that float above or beside editor content. Supports bubble menus (appear on selection) and floating menus (appear on empty lines).
131

132
```typescript { .api }
133
const BubbleMenu: DefineComponent<{
134
  pluginKey?: PropType<string | Object>;
135
  editor: PropType<Editor>;
136
  updateDelay?: PropType<number>;
137
  resizeDelay?: PropType<number>;
138
  options?: PropType<Object>;
139
  shouldShow?: PropType<Function>;
140
}>;
141

142
const FloatingMenu: DefineComponent<{
143
  pluginKey?: PropType<string | Object>;
144
  editor: PropType<Editor>;
145
  options?: PropType<Object>;
146
  shouldShow?: PropType<Function>;
147
}>;
148
```
149

150
[Menu Components](./menu-components.md)
151

152
### Vue Renderers
153

154
Utilities for creating custom Vue-based node and mark views. Enables embedding Vue components directly into editor content with full component lifecycle support.
155

156
```typescript { .api }
157
class VueRenderer {
158
  constructor(component: Component, options: VueRendererOptions);
159
  get element(): Element | null;
160
  get ref(): any;
161
  updateProps(props: Record<string, any>): void;
162
  destroy(): void;
163
}
164

165
function VueNodeViewRenderer(component: Component, options?: VueNodeViewRendererOptions): NodeViewRenderer;
166
function VueMarkViewRenderer(component: Component, options?: VueMarkViewRendererOptions): MarkViewRenderer;
167
```
168

169
[Vue Renderers](./vue-renderers.md)
170

171
### Core Editor API
172

173
Complete tiptap core functionality including commands, helpers, extensions, and utilities. Provides the full editor API for content manipulation, state management, and extension development.
174

175
```typescript { .api }
176
// Re-exported from @tiptap/core
177
class Extension { /* ... */ }
178
class Node { /* ... */ }
179
class Mark { /* ... */ }
180

181
// Commands (55+ functions)
182
function insertContent(content: Content): Command;
183
function toggleMark(typeOrName: string | MarkType, attributes?: {}): Command;
184
function setTextSelection(position: number | { from: number; to?: number }): Command;
185

186
// Helpers (54+ functions)  
187
function generateHTML(doc: JSONContent, extensions: Extensions): string;
188
function generateJSON(html: string, extensions: Extensions): JSONContent;
189
function isActive(state: EditorState, typeOrName: string | NodeType | MarkType, attributes?: {}): boolean;
190
```
191

192
[Core Editor API](./core-editor-api.md)
193

194
## Types
195

196
```typescript { .api }
197
interface ContentComponent {
198
  ctx: ComponentPublicInstance;
199
}
200

201
interface VueRendererOptions {
202
  editor: Editor;
203
  props?: Record<string, any>;
204
}
205

206
interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
207
  update?: ((props: {
208
    oldNode: ProseMirrorNode;
209
    oldDecorations: readonly Decoration[];
210
    oldInnerDecorations: DecorationSource;
211
    newNode: ProseMirrorNode;
212
    newDecorations: readonly Decoration[];
213
    innerDecorations: DecorationSource;
214
    updateProps: () => void;
215
  }) => boolean) | null;
216
}
217

218
interface VueMarkViewRendererOptions extends MarkViewRendererOptions {
219
  as?: string;
220
  className?: string;
221
  attrs?: { [key: string]: string };
222
}
223

224
// All @tiptap/core types are also available
225
type EditorOptions = { /* core editor configuration */ };
226
type JSONContent = { /* document content structure */ };
227
type Extensions = Extension[];
228
```