0
# Vue Components
1

2
Vue 3 components for rendering editor content and UI elements with full integration into Vue's component system.
3

4
## Capabilities
5

6
### EditorContent Component
7

8
The main component for rendering the editor's content area where users can type and edit text.
9

10
```typescript { .api }
11
/**
12
 * Vue component that renders the editor content area
13
 * Handles editor mounting and Vue context integration
14
 */
15
const EditorContent: DefineComponent<{
16
  /** The editor instance to render content for */
17
  editor: {
18
    type: PropType<Editor>;
19
    default: null;
20
  };
21
}>;
22
```
23

24
**Key Features:**
25
- Automatically mounts editor to DOM element
26
- Integrates Vue app context and provides
27
- Handles editor lifecycle synchronization
28
- Creates ProseMirror node views
29

30
**Usage Examples:**
31

32
```typescript
33
<template>
34
  <div>
35
    <EditorContent :editor="editor" />
36
  </div>
37
</template>
38

39
<script setup>
40
import { useEditor, EditorContent } from "@tiptap/vue-3";
41
import StarterKit from "@tiptap/starter-kit";
42

43
const editor = useEditor({
44
  content: '<p>Hello World!</p>',
45
  extensions: [StarterKit],
46
});
47
</script>
48
```
49

50
### NodeViewContent Component
51

52
Component for rendering the content area within custom node views.
53

54
```typescript { .api }
55
/**
56
 * Component for rendering node view content areas
57
 * Used inside custom node view components
58
 */
59
const NodeViewContent: DefineComponent<{
60
  /** HTML tag to render as */
61
  as?: {
62
    type: PropType<string>;
63
    default: 'div';
64
  };
65
}>;
66
```
67

68
**Key Features:**
69
- Pre-configured with `white-space: pre-wrap` styling
70
- Marked with `data-node-view-content` attribute
71
- Customizable HTML tag via `as` prop
72

73
**Usage Examples:**
74

75
```typescript
76
<!-- In a custom node view component -->
77
<template>
78
  <div class="my-custom-node">
79
    <h3>Custom Node</h3>
80
    <NodeViewContent as="div" />
81
  </div>
82
</template>
83

84
<script setup>
85
import { NodeViewContent } from "@tiptap/vue-3";
86
</script>
87
```
88

89
### NodeViewWrapper Component
90

91
Wrapper component for custom node views that handles drag events and decorations.
92

93
```typescript { .api }
94
/**
95
 * Wrapper component for custom node views
96
 * Handles drag events and decoration styling
97
 */
98
const NodeViewWrapper: DefineComponent<{
99
  /** HTML tag to render as */
100
  as?: {
101
    type: PropType<string>;
102
    default: 'div';
103
  };
104
}>;
105
```
106

107
**Injected Dependencies:**
108
- `onDragStart`: Function - Drag start event handler
109
- `decorationClasses`: String - CSS classes for ProseMirror decorations
110

111
**Key Features:**
112
- Handles drag and drop events
113
- Applies ProseMirror decoration classes
114
- Marked with `data-node-view-wrapper` attribute
115
- Normalizes white-space styling
116

117
**Usage Examples:**
118

119
```typescript
120
<!-- In a custom node view component -->
121
<template>
122
  <NodeViewWrapper as="article" class="my-wrapper">
123
    <div class="node-header">
124
      <button @click="deleteNode">Delete</button>
125
    </div>
126
    <NodeViewContent />
127
  </NodeViewWrapper>
128
</template>
129

130
<script setup>
131
import { NodeViewContent, NodeViewWrapper } from "@tiptap/vue-3";
132
import { inject } from 'vue';
133

134
// Access injected dependencies
135
const onDragStart = inject('onDragStart');
136
const decorationClasses = inject('decorationClasses');
137

138
// Node view props are automatically provided
139
const props = defineProps(nodeViewProps);
140

141
const deleteNode = () => {
142
  props.deleteNode();
143
};
144
</script>
145
```
146

147
### Component Integration Patterns
148

149
**Slot Usage:**
150

151
```typescript
152
<template>
153
  <NodeViewWrapper>
154
    <!-- Default slot content -->
155
    <div class="custom-content">
156
      <NodeViewContent />
157
    </div>
158
  </NodeViewWrapper>
159
</template>
160
```
161

162
**Styling Integration:**
163

164
```typescript
165
<template>
166
  <NodeViewWrapper class="prose-node" :class="additionalClasses">
167
    <NodeViewContent class="content-area" />
168
  </NodeViewWrapper>
169
</template>
170

171
<style scoped>
172
.prose-node {
173
  border: 1px solid #e5e7eb;
174
  border-radius: 0.375rem;
175
  padding: 1rem;
176
}
177

178
.content-area {
179
  min-height: 2rem;
180
  outline: none;
181
}
182
</style>
183
```
184

185
**Event Handling:**
186

187
```typescript
188
<template>
189
  <NodeViewWrapper @click="handleClick" @keydown="handleKeydown">
190
    <div class="toolbar">
191
      <button @click="updateAttributes({ alignment: 'left' })">Left</button>
192
      <button @click="updateAttributes({ alignment: 'center' })">Center</button>
193
    </div>
194
    <NodeViewContent />
195
  </NodeViewWrapper>
196
</template>
197

198
<script setup>
199
import { nodeViewProps } from "@tiptap/vue-3";
200

201
const props = defineProps(nodeViewProps);
202

203
const handleClick = (event) => {
204
  console.log('Node clicked', event);
205
};
206

207
const handleKeydown = (event) => {
208
  if (event.key === 'Delete') {
209
    props.deleteNode();
210
  }
211
};
212
</script>
213
```
214

215
## Types
216

217
```typescript { .api }
218
interface NodeViewProps {
219
  editor: Editor;
220
  node: ProseMirrorNode;
221
  decorations: DecorationWithType[];
222
  selected: boolean;
223
  extension: Node;
224
  getPos: () => number | undefined;
225
  updateAttributes: (attributes: Record<string, any>) => void;
226
  deleteNode: () => void;
227
  view: EditorView;
228
  innerDecorations: DecorationSource;
229
  HTMLAttributes: Record<string, any>;
230
}
231

232
const nodeViewProps: {
233
  editor: { type: PropType<NodeViewProps['editor']>; required: true };
234
  node: { type: PropType<NodeViewProps['node']>; required: true };
235
  decorations: { type: PropType<NodeViewProps['decorations']>; required: true };
236
  selected: { type: PropType<NodeViewProps['selected']>; required: true };
237
  extension: { type: PropType<NodeViewProps['extension']>; required: true };
238
  getPos: { type: PropType<NodeViewProps['getPos']>; required: true };
239
  updateAttributes: { type: PropType<NodeViewProps['updateAttributes']>; required: true };
240
  deleteNode: { type: PropType<NodeViewProps['deleteNode']>; required: true };
241
  view: { type: PropType<NodeViewProps['view']>; required: true };
242
  innerDecorations: { type: PropType<NodeViewProps['innerDecorations']>; required: true };
243
  HTMLAttributes: { type: PropType<NodeViewProps['HTMLAttributes']>; required: true };
244
};
245
```