Registry / web-framework / lexical-vue

lexical-vue

JSON →
library0.14.1jsnpmunverified

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.

web-framework
npm install lexical-vue
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · LEXICAL-VUE
L
lexical-vue
web-frameworkjavascriptv0.14.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

LexicalComposer
✓ import { LexicalComposer } from 'lexical-vue/LexicalComposer'
✗ import { LexicalComposer } from 'lexical-vue'
Since v0.13.0, individual plugins and core components are imported from their specific paths to enable better tree-shaking and reduce bundle size.
PlainTextPlugin
✓ import { PlainTextPlugin } from 'lexical-vue/LexicalPlainTextPlugin'
✗ import { PlainTextPlugin } from 'lexical-vue'
Plugin names were harmonized with React equivalents and now require specific path imports since v0.13.0.
$getRoot
✓ import { $getRoot } from 'lexical'
✗ import { $getRoot } from 'lexical-vue'
Lexical core utility functions like `$getRoot` are imported directly from the `lexical` package, not `lexical-vue`.
RichTextEditor
✓ import { RichTextEditor } from 'lexical-vue/RichTextEditor'
✗ import { LexicalRichTextEditor } from 'lexical-vue/LexicalRichTextEditor'
The `LexicalRichTextEditor` component was renamed to `RichTextEditor` in v0.13.0 for consistency with React equivalents, and now requires a specific path import.

Demonstrates a basic plain-text Lexical editor in Vue 3, including initial configuration, content editable area, and change event handling.

<script setup lang="ts"> import { $getRoot, $getSelection } from 'lexical' import { LexicalComposer } from 'lexical-vue/LexicalComposer' import { AutoFocusPlugin } from 'lexical-vue/LexicalAutoFocusPlugin' import { ContentEditable } from 'lexical-vue/LexicalContentEditable' import { HistoryPlugin } from 'lexical-vue/LexicalHistoryPlugin' import { OnChangePlugin } from 'lexical-vue/LexicalOnChangePlugin' import { PlainTextPlugin } from 'lexical-vue/LexicalPlainTextPlugin' const config = { editable: true, theme: { // Theme styling goes here } } // When the editor changes, you can get notified via the // LexicalOnChangePlugin! function onChange(editorState) { editorState.read(() => { // Read the contents of the EditorState here. const root = $getRoot() const selection = $getSelection() console.log(root, selection) }) } </script> <template> <LexicalComposer :initial-config="config"> <PlainTextPlugin> <template #contentEditable> <ContentEditable> <template #placeholder> <div>Enter some text...</div> </template> </ContentEditable > </template> </PlainTextPlugin> <OnChangePlugin @change="onChange" /> <HistoryPlugin /> <AutoFocusPlugin /> </LexicalComposer> </template>
Debug
Known issues
breakingPlugin 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.
fix
Update component names and import paths according to the new convention (e.g., `LexicalRichTextEditor` -> `RichTextEditor`, import from `'lexical-vue/RichTextEditor'`).
affects: >=0.13.0
breakingUpgraded 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.
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.
affects: >=0.13.0
gotcha`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.
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.
affects: >=0.9.0
Errors
Common errors & fixes
Failed to resolve component: LexicalRichTextEditor
Component or plugin name changed in `lexical-vue@0.13.0` and its import path is now specific.
fix
Replace `LexicalRichTextEditor` with `RichTextEditor` and ensure it's imported from `lexical-vue/RichTextEditor` (or similar for other renamed plugins).
Cannot read properties of undefined (reading 'registerNode')
Lexical core package version mismatch or incorrect node registration for the installed `lexical-vue` version.
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`.
Could not resolve 'lexical-vue' when trying to import 'LexicalComposer'.
Attempting to import individual components directly from the main `lexical-vue` entry point after v0.13.0, when they moved to specific subpaths.
fix
Import `LexicalComposer` and other plugins from their specific subpaths, e.g., `import { LexicalComposer } from 'lexical-vue/LexicalComposer'`.
Upgrade
Version history
0.14.1latest on npm
Audit
Dependencies
vuerequiredRuntime peer dependency for Vue 3 component rendering.
Agent activity
19 hits · last 30 days
node
18
Resources
githubhttps://github.com/wobsoriano/lexical-vue ↗
packagehttps://www.npmjs.com/package/lexical-vue ↗
homepagehttps://lexical-vue.com ↗
lexical-vue — npm install lexical-vue · libregistry