Vue 3
Vue 3 WYSIWYG editor — lightweight, Nuxt-ready, free
@liteeditor/vue wraps LiteEditor, a ~41 KB vanilla JS rich text editor, in a small Vue 3 component. Tables, images, media, code samples and a menubar out of the box — and guarded init makes it Nuxt-ready.
Step 1
Install the Vue rich text editor
npm install @liteeditor/vue @liteeditor/editorStep 2
Use it — Vue 3, Nuxt, and the exposed API
<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="all"
toolbar="full"
@ready="(editor) => console.log('ready', editor.version)"
/>
<button @click="save">Save</button>
</template>model-value seeds, getContent() reads
modelValue is the initial HTML; read the current document with getContent() on the template ref when you save. Full v-model two-way binding on every keystroke is intentionally not offered — reactive re-rendering of rich text causes cursor jumps and slows large documents. Use setContent() to replace content after mount.
Live
The same editor, live
This page is Vue — the editor below is rendered by the same component.
Vue TinyMCE alternative
Lighter than TinyMCE, CKEditor and Quill for Vue
FAQ
Vue WYSIWYG editor FAQ
LiteEditor's @liteeditor/vue component gives Vue 3 apps a ~41 KB gzipped WYSIWYG editor with tables, images, media embeds, code samples and a menubar included, plus a free lifetime plan — a lighter Vue TinyMCE alternative.
Also available: Nuxt step-by-step guide · React component
Add a lightweight WYSIWYG editor to your Vue app
Free lifetime plan · No credit card · localhost pre-approved for development
npm install @liteeditor/vue @liteeditor/editor