Vue 3
Vue WYSIWYG editor
@liteeditor/vue is the official Vue 3 component for LiteEditor — a lightweight, dependency-free rich text editor with tables, images, media embeds and an optional menubar. SSR-safe, Nuxt-ready, and just 36.4 KB gzipped.
Install
npm install @liteeditor/vue @liteeditor/editorUse
<script setup>
import { ref } from 'vue'
import { LiteEditor } from '@liteeditor/vue'
const editorRef = ref(null)
function save() {
const html = editorRef.value?.getContent()
// send html to your API
}
</script>
<template>
<LiteEditor
ref="editorRef"
api-key="YOUR_API_KEY"
model-value="<p>Hello <strong>Vue</strong>!</p>"
:height="320"
:menubar="true"
plugins="link lists table image media"
toolbar="undo redo | blocks | bold italic underline | link image table | numlist bullist"
@ready="(editor) => console.log('editor ready', editor)"
/>
<button @click="save">Save</button>
</template>The template ref exposes getContent(), setContent(html) and instance(). TypeScript definitions ship with the package.
The same editor, live
This page itself is Vue — the editor below is rendered by the same component:
Frequently asked questions
modelValue seeds the initial HTML; you read the current content via the exposed getContent() method (template ref) or the ready event’s editor instance. Two-way binding on every keystroke is intentionally avoided — live re-rendering rich text through reactivity causes cursor jumps and slows large documents.
Also available: React component · Compare with TinyMCE