Installation

You can install @erag/text-editor-vue using your preferred package manager.

Install Package

npm

npm install @erag/text-editor-vue

pnpm

pnpm add @erag/text-editor-vue

yarn

yarn add @erag/text-editor-vue

Peer Dependencies

Ensure your project has Vue 3 installed:

{
    "peerDependencies": {
        "vue": ">=3.5.0 <4"
    }
}

The package itself requires Node.js 24 or newer for local development, building, and publishing:

node --version
# v24.0.0 or newer

Node.js is not used by the editor at browser runtime.

---

Import Stylesheet

The component requires its package stylesheet for toolbar layout, menus, dialogs, mentions, merge tags, image resize handles, and the built-in light/dark theme tokens.

Import the CSS stylesheet once in your main application entry point (e.g., main.ts, app.ts, or layout file):

import '@erag/text-editor-vue/style.css';

The stylesheet follows prefers-color-scheme: dark by default with a black editor surface. To control the theme yourself, add class="dark", data-theme="dark", or data-theme="light" to the document's <html> element. See CSS customization for palette overrides.

Alternatively, you can import it directly inside your Vue component <script setup>:

<script setup lang="ts">
import { Editor } from '@erag/text-editor-vue';
import '@erag/text-editor-vue/style.css';
</script>

---

CSS reset compatibility

If your application uses a CSS reset, list markers inside standard lists (<ul>, <ol>) might normally be hidden.

@erag/text-editor-vue includes scoped marker and indentation styles inside .erag-editor, ensuring list items and numbers render cleanly without conflicts.