Vizel API / vue/src / useVizelEditor

Function: useVizelEditor()

function useVizelEditor(options?): ShallowRef<Editor | null>;

Defined in: packages/vue/src/composables/useVizelEditor.ts:77

Vue composable to create and manage a Vizel editor instance.

Reactive vs mount-time options

The Tiptap editor instance is created once on mount. To avoid expensive teardowns, most options are read once at mount and ignored on subsequent renders. The following option is an exception:

• editable — propagated through editor.setEditable() whenever the prop value changes.

Changing initialContent, initialMarkdown, placeholder, features, extensions, flavor, locale, or autofocus after mount has no effect. Use editor.value.commands.setContent(...) (or the corresponding feature command) to update the document after mount.

Parameters

Parameter	Type
options	UseVizelEditorOptions

Returns

ShallowRef<Editor | null>

Examples

<script setup lang="ts">
import { useVizelEditor, EditorContent } from '@vizel/vue';

const editor = useVizelEditor({
  placeholder: "Start typing...",
  onUpdate: ({ editor }) => {
    console.log(editor.getJSON());
  },
});
</script>

<template>
  <EditorContent :editor="editor" />
</template>

<script setup lang="ts">
// With initial markdown content
const editor = useVizelEditor({
  initialMarkdown: "# Hello World\n\nThis is **bold** text.",
});
</script>