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, and image resize handles.

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';

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.