Introduction
lexical-vue is a set of components and composables for using Lexical, Meta's text editor framework, in Vue 3. It is the Vue counterpart to @lexical/react.
Lexical itself is framework agnostic. This package owns the Vue side of it. It creates the editor and keeps it alive for as long as your component is mounted, lets any component inside reach that editor without passing it down through props, renders embedded content like images and videos as ordinary Vue components, and hands you editor state as refs you can watch.
Learning Lexical
Everything about Lexical itself is documented at lexical.dev, and all of it applies here. Read those pages rather than looking for a Vue-flavoured version.
- What Lexical is and what you can build with it
- Editor state, the immutable data model behind the editor
- Updates, and why editor changes go through
editor.update() - Listeners, transforms and commands, the register APIs
- Serialization for saving and loading content
Two things carry over into Vue in a way worth knowing up front. You rarely call createEditor() yourself, since LexicalComposer and LexicalExtensionComposer do it for you. And $ prefixed functions only work inside an editor.update() or editor.read() callback, which is a similar idea to composables only working during setup, except $ functions can be called in any order.
Where to start
- Usage builds a working editor from scratch.
- Theming covers styling the editor's nodes.
- Available plugins lists the components this package ships.
- Extensions covers Lexical's extension system, which is the newer way to compose editor behaviour.