Props

<Tiptapify> Props

content

• Type: String | Object
• Default: ''

Initial editor content. Accepts HTML string or Tiptap JSON object.

<!-- HTML string -->
<Tiptapify :content="'<p>Hello world</p>'" />

<!-- Tiptap JSON -->
<Tiptapify :content="{ type: 'doc', content: [{ type: 'paragraph' }] }" />

placeholder

• Type: String
• Default: ''

Placeholder text shown when the editor is empty.

<Tiptapify placeholder="Start typing..." />

height

• Type: Number
• Default: null

Editor content area minimum height in pixels.

<Tiptapify :height="500" />

toolbar

• Type: Boolean
• Default: true

Show or hide the toolbar.

<Tiptapify :toolbar="false" />

items

• Type: Array<String> | Object
• Default: []

Toolbar items to display. Pass an array of item names or an object with named sections. See Toolbar Items.

<!-- Array -->
<Tiptapify :items="['bold', 'italic', 'underline', '|', 'undo', 'redo']" />

<!-- Object with sections -->
<Tiptapify :items="{ format: ['bold', 'italic'], misc: ['undo', 'redo'] }" />

itemsExclude

• Type: Boolean
• Default: false

When true, the items prop specifies items to exclude rather than include.

<Tiptapify
  :items="['source', 'preview', 'fullscreen']"
  :items-exclude="true"
/>

bubbleMenu

• Type: Boolean
• Default: true

Show the bubble menu when text is selected.

<Tiptapify :bubble-menu="false" />

floatingMenu

• Type: Boolean
• Default: true

Show the floating menu on empty lines.

<Tiptapify :floating-menu="false" />

slashCommands

• Type: Boolean
• Default: true

Enable slash command menu (type / to trigger).

<Tiptapify :slash-commands="false" />

showWordsCount

• Type: Boolean
• Default: true

Show word count in the editor footer.

<Tiptapify :show-words-count="false" />

showCharactersCount

• Type: Boolean
• Default: true

Show character count in the editor footer.

<Tiptapify :show-characters-count="false" />

defaultFontFamily

• Type: String
• Default: 'Inter'

Default font family for editor content.

<Tiptapify default-font-family="Georgia" />

fontMeasure

• Type: String
• Default: 'px'

Measurement unit for font size values.

<Tiptapify font-measure="px" />

rounded

• Type: String
• Default: '0'

Border radius for the editor container. Accepts Vuetify radius values (sm, md, lg, xl, pill, etc.).

<Tiptapify rounded="lg" />

variantBtn

• Type: String
• Default: 'tonal'

Vuetify button variant for toolbar buttons. Options: text, flat, elevated, tonal, outlined, plain.

<Tiptapify variant-btn="outlined" />

variantField

• Type: String
• Default: 'outlined'

Vuetify variant for toolbar dropdown fields (font family, size, color).

<Tiptapify variant-field="filled" />

customExtensions

• Type: Array<toolbarSections>
• Default: []

Provide custom Tiptap extensions to register with the editor. See Custom Extensions.

<Tiptapify :custom-extensions="customExtensions" />

interactiveStyles

• Type: Boolean
• Default: true

Enable interactive style application.

<Tiptapify :interactive-styles="false" />

loading

• Type: Boolean
• Default: false

Show an indeterminate progress bar while the editor is loading.

<Tiptapify loading />

loadingColor

• Type: String
• Default: 'default'

Color of the loading progress bar. Accepts Vuetify theme color values.

<Tiptapify loading-color="primary" />

loadingHeight

• Type: String
• Default: '1px'

Height of the loading progress bar.

<Tiptapify :loading-height="'4px'" />

Events

editor-ready

Fired when the editor instance is ready.

interface EditorReadyPayload {
  editor: TiptapEditor  // Raw Tiptap Editor instance
  getHTML: () => string  // Get current HTML content
  getJSON: () => object  // Get current JSON content
}

<script setup lang="ts">
const onEditorReady = (payload) => {
  console.log(payload.editor)
  console.log(payload.getHTML())
  console.log(payload.getJSON())
}
</script>

<template>
  <Tiptapify @editor-ready="onEditorReady" />
</template>

content-changed

Fired when the editor content changes.

interface ContentChangedPayload {
  html: string   // Current HTML content
  json: object   // Current JSON content
}

<script setup lang="ts">
const onContentChanged = ({ html, json }) => {
  console.log('HTML:', html)
  console.log('JSON:', json)
}
</script>

<template>
  <Tiptapify @content-changed="onContentChanged" />
</template>

update:modelValue

Supports v-model binding.

<script setup lang="ts">
import { ref } from 'vue'
const content = ref('<p>Hello</p>')
</script>

<template>
  <Tiptapify v-model="content" />
</template>

Provide / Inject

The editor instance and t function are available via Vue's provide/inject:

import { inject } from 'vue'

const editor = inject('tiptapifyEditor')
const { t } = inject('tiptapifyI18n')