Starter for Vue
The VueKit is a collection of Tiptap extensions with vue. If you’re just getting started, this extension is for you.
Installation
bash
npm install @tiptap/vue-3 @note-editor/vue-kitbash
pnpm add @tiptap/vue-3 @note-editor/vue-kitExport
setupKit
a collection of Tiptap extensions, similar to StarterKit
ts
import { Editor } from '@tiptap/core'
import { setupKit } from '@note-editor/vue-kit'
const editor = new Editor({
extensions: [
setupKit
]
})useNoteEditor
a vue composable for tiptap
ts
import { useNoteEditor } from '@note-editor/vue-kit'Usage
vue
<script setup lang="ts">
import { EditorContent } from '@tiptap/vue-3'
import { useNoteEditor } from '@note-editor/vue-kit'
const { editor } = useNoteEditor()
</script>
<template>
<EditorContent :editor="editor" />
</template>You can configure the included extensions, or even disable a few of them, like shown below.
vue
<script setup lang="ts">
import { EditorContent } from '@tiptap/vue-3'
import { useNoteEditor } from '@note-editor/vue-kit'
const { editor } = useNoteEditor({
// Configuration items equivalent to setupKit
kitOptions: {
// Configure an included extension
heading: {
levels: [1, 2],
},
// Disable an included extension
history: false,
}
})
</script>
<template>
<EditorContent :editor="editor" />
</template>Included extensions
Nodes
- Blockquote
- BulletList
- Document
- HardBreak
- Heading
- HorizontalRule
- ListItem
- OrderedList
- Paragraph
- Table
- TableCell
- TableHeader
- TableRow
- TaskItem
- TaskList
- Text
- Block Container
- Code Block Shiki
- Details