Lexical Vue Editor

0.14.1 · active · verified Sun Apr 19

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.

Common errors

```
Failed to resolve component: LexicalRichTextEditor
```
cause 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')
```
cause 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'.
```
cause 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'`.

Warnings

breaking 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.
Fix: Update component names and import paths according to the new convention (e.g., `LexicalRichTextEditor` -> `RichTextEditor`, import from `'lexical-vue/RichTextEditor'`).
breaking 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.
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.
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.

Install

npm install lexical-vue npm
yarn add lexical-vue yarn
pnpm add lexical-vue pnpm

Imports

LexicalComposer
wrong:
```
import { LexicalComposer } from 'lexical-vue'
```
correct:
```
import { LexicalComposer } from 'lexical-vue/LexicalComposer'
```
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
wrong:
```
import { PlainTextPlugin } from 'lexical-vue'
```
correct:
```
import { PlainTextPlugin } from 'lexical-vue/LexicalPlainTextPlugin'
```
Plugin names were harmonized with React equivalents and now require specific path imports since v0.13.0.
$getRoot
wrong:
```
import { $getRoot } from 'lexical-vue'
```
correct:
```
import { $getRoot } from 'lexical'
```
Lexical core utility functions like `$getRoot` are imported directly from the `lexical` package, not `lexical-vue`.
RichTextEditor
wrong:
```
import { LexicalRichTextEditor } from 'lexical-vue/LexicalRichTextEditor'
```
correct:
```
import { RichTextEditor } from 'lexical-vue/RichTextEditor'
```
The `LexicalRichTextEditor` component was renamed to `RichTextEditor` in v0.13.0 for consistency with React equivalents, and now requires a specific path import.

Quickstart

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>

view raw JSON →