Installation
You can install @erag/text-editor-vue using your preferred package manager.
Install Package
npm install @erag/text-editor-vuepnpm add @erag/text-editor-vueyarn add @erag/text-editor-vuePeer 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 newerNode.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.