{"id":11235,"library":"lexical-vue","title":"Lexical Vue Editor","description":"Lexical Vue is an extensible web text-editor component library for Vue 3, built upon Facebook's Lexical framework. It provides Vue components that wrap Lexical's core functionalities and plugins, allowing developers to integrate rich-text editing capabilities into their Vue applications. The current stable version is 0.14.1. The package follows Lexical's rapid release cadence, frequently bumping its dependency on `lexical` to keep up with the upstream project's evolution, often leading to minor version bumps with breaking changes from the underlying Lexical library. Key differentiators include its declarative Vue component API for managing editor state and plugins, and its direct integration with the powerful, extensible, and accessible Lexical editor core, contrasting with other Vue-specific editor solutions that might use different underlying architectures or are less frequently updated.","status":"active","version":"0.14.1","language":"javascript","source_language":"en","source_url":"https://github.com/wobsoriano/lexical-vue","tags":["javascript","vue","lexical","editor","rich-text","typescript"],"install":[{"cmd":"npm install lexical-vue","lang":"bash","label":"npm"},{"cmd":"yarn add lexical-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add lexical-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for Vue 3 component rendering.","package":"vue","optional":false}],"imports":[{"note":"Since v0.13.0, individual plugins and core components are imported from their specific paths to enable better tree-shaking and reduce bundle size.","wrong":"import { LexicalComposer } from 'lexical-vue'","symbol":"LexicalComposer","correct":"import { LexicalComposer } from 'lexical-vue/LexicalComposer'"},{"note":"Plugin names were harmonized with React equivalents and now require specific path imports since v0.13.0.","wrong":"import { PlainTextPlugin } from 'lexical-vue'","symbol":"PlainTextPlugin","correct":"import { PlainTextPlugin } from 'lexical-vue/LexicalPlainTextPlugin'"},{"note":"Lexical core utility functions like `$getRoot` are imported directly from the `lexical` package, not `lexical-vue`.","wrong":"import { $getRoot } from 'lexical-vue'","symbol":"$getRoot","correct":"import { $getRoot } from 'lexical'"},{"note":"The `LexicalRichTextEditor` component was renamed to `RichTextEditor` in v0.13.0 for consistency with React equivalents, and now requires a specific path import.","wrong":"import { LexicalRichTextEditor } from 'lexical-vue/LexicalRichTextEditor'","symbol":"RichTextEditor","correct":"import { RichTextEditor } from 'lexical-vue/RichTextEditor'"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { $getRoot, $getSelection } from 'lexical'\n\nimport { LexicalComposer } from 'lexical-vue/LexicalComposer'\nimport { AutoFocusPlugin } from 'lexical-vue/LexicalAutoFocusPlugin'\nimport { ContentEditable } from 'lexical-vue/LexicalContentEditable'\nimport { HistoryPlugin } from 'lexical-vue/LexicalHistoryPlugin'\nimport { OnChangePlugin } from 'lexical-vue/LexicalOnChangePlugin'\nimport { PlainTextPlugin } from 'lexical-vue/LexicalPlainTextPlugin'\n\nconst config = {\n  editable: true,\n  theme: {\n    // Theme styling goes here\n  }\n}\n\n// When the editor changes, you can get notified via the\n// LexicalOnChangePlugin!\nfunction onChange(editorState) {\n  editorState.read(() => {\n    // Read the contents of the EditorState here.\n    const root = $getRoot()\n    const selection = $getSelection()\n\n    console.log(root, selection)\n  })\n}\n</script>\n\n<template>\n  <LexicalComposer :initial-config=\"config\">\n    <PlainTextPlugin>\n      <template #contentEditable>\n        <ContentEditable>\n          <template #placeholder>\n            <div>Enter some text...</div>\n          </template>\n        </ContentEditable >\n      </template>\n    </PlainTextPlugin>\n    <OnChangePlugin @change=\"onChange\" />\n    <HistoryPlugin />\n    <AutoFocusPlugin />\n  </LexicalComposer>\n</template>","lang":"typescript","description":"Demonstrates a basic plain-text Lexical editor in Vue 3, including initial configuration, content editable area, and change event handling."},"warnings":[{"fix":"Update component names and import paths according to the new convention (e.g., `LexicalRichTextEditor` -> `RichTextEditor`, import from `'lexical-vue/RichTextEditor'`).","message":"Plugin components like `LexicalRichTextEditor` were renamed (e.g., to `RichTextEditor`) and now require imports from specific subpaths (e.g., 'lexical-vue/RichTextEditor') instead of the main package entry point.","severity":"breaking","affected_versions":">=0.13.0"},{"fix":"Review Lexical's upstream changelog for the corresponding version (e.g., 0.37.0, 0.38.1) and update any custom nodes, commands, or serialization logic accordingly. Test editor functionality thoroughly after upgrade.","message":"Upgraded to Lexical 0.37.0 (and subsequently 0.38.1), which may introduce breaking changes from the upstream Lexical project. Ensure your Lexical nodes and plugins are compatible with the updated version.","severity":"breaking","affected_versions":">=0.13.0"},{"fix":"Always check the release notes for `lexical-vue` and the corresponding Lexical version when upgrading. Expect potential breaking changes that require adjustments to custom Lexical nodes or editor configurations.","message":"`lexical-vue` frequently updates its underlying `lexical` dependency (e.g., 0.9.0 to 0.16.1, 0.10.0 to 0.25.0, 0.11.0 to 0.27.0, 0.12.0 to 0.37.0, 0.14.0 to 0.38.1). Each update may bring breaking changes from Lexical itself, even if `lexical-vue`'s own minor version doesn't indicate a breaking change.","severity":"gotcha","affected_versions":">=0.9.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Replace `LexicalRichTextEditor` with `RichTextEditor` and ensure it's imported from `lexical-vue/RichTextEditor` (or similar for other renamed plugins).","cause":"Component or plugin name changed in `lexical-vue@0.13.0` and its import path is now specific.","error":"Failed to resolve component: LexicalRichTextEditor"},{"fix":"Ensure your `lexical` and `lexical-vue` packages are compatible and that custom nodes are registered correctly in the `initialConfig.nodes` array or through a plugin's `createEditor` function, aligning with the Lexical version required by `lexical-vue`.","cause":"Lexical core package version mismatch or incorrect node registration for the installed `lexical-vue` version.","error":"Cannot read properties of undefined (reading 'registerNode')"},{"fix":"Import `LexicalComposer` and other plugins from their specific subpaths, e.g., `import { LexicalComposer } from 'lexical-vue/LexicalComposer'`.","cause":"Attempting to import individual components directly from the main `lexical-vue` entry point after v0.13.0, when they moved to specific subpaths.","error":"Could not resolve 'lexical-vue' when trying to import 'LexicalComposer'."}],"ecosystem":"npm"}