Lexical components and composables for Vue applications.

Overview

lexical-vue

Note: Lexical is currently in early development and APIs and packages are likely to change quite often.

Lexical components and composables for Vue applications.

For documentation and more information about Lexical, be sure to visit the Lexical website.

Demo: https://lexical-vue-playground.vercel.app

Getting started with Vue

Requires Vue 3.2.0 or higher.

Install lexical and lexical-vue:

pnpm add lexical lexical-vue # or npm or yarn

Below is an example of a basic plain text editor using lexical and lexical-vue.

import { $getRoot, $getSelection } from 'lexical' import { ref } from 'vue' import { LexicalAutoFocusPlugin, LexicalComposer, LexicalContentEditable, LexicalHistoryPlugin, LexicalOnChangePlugin, LexicalPlainTextPlugin, } from 'lexical-vue' const config = { theme: { // Theme styling goes here }, onError(error) { console.error(error) }, } // 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) }) } // Two-way binding const content = ref('') ">
<script setup lang="ts">
import { $getRoot, $getSelection } from 'lexical'
import { ref } from 'vue'

import {
  LexicalAutoFocusPlugin,
  LexicalComposer,
  LexicalContentEditable,
  LexicalHistoryPlugin,
  LexicalOnChangePlugin,
  LexicalPlainTextPlugin,
} from 'lexical-vue'

const config = {
  theme: {
    // Theme styling goes here
  },
  onError(error) {
    console.error(error)
  },
}

// 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)
  })
}

// Two-way binding
const content = ref('')
script>

<template>
  <LexicalComposer :initial-config="config">
    <LexicalPlainTextPlugin>
      <template #contentEditable>
        <LexicalContentEditable />
      template>
      <template #placeholder>
        <div>
          Enter some text...
        div>
      template>
    LexicalPlainTextPlugin>
    <LexicalOnChangePlugin v-model="content" @change="onChange" />
    <LexicalHistoryPlugin />
    <LexicalAutoFocusPlugin />
  LexicalComposer>
template>

For a more complex example, check the rich text editor playground.

I'm converting most of @lexical/react plugins into Vue 3 components. Check them all here.

Credits

License

MIT

You might also like...
Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS
MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS

MKTemplate A beautiful UI . Start your Web Site with this bootstrap and VueJS UI . MKTemplate is Free and Open Source. It features multiple HTML and V

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno. 🎡 A component for rendering Vue components with live editor and preview.
🎡 A component for rendering Vue components with live editor and preview.

Vuep (vue playground) 🎡 A component for rendering Vue components with live editor and preview. Links Docs: https://cinwell.com/vuep/ An online playgo

Flexible and powerful Vue 3 components for Stripe.js

Vue Stripe.js Flexible and powerful Vue 3 components for Stripe. It's a glue between Stripe.js and Vue component lifecycle. Vue 3: stable ✅ Vue 2: use

Vue.js components for consistent navigation and branding across Creative Commons web properties

cc-global-components Vue.js components for consistent navigation and branding across Creative Commons web properties Status Development: This project

Docs generator for AngularJS, Vue, React, and Vanilla components

Docs generator for AngularJS, Vue, React, and Vanilla components

Webact is a tiny library that helps you create web components in a manner similar to Vue and React.

🛠 Webact 🌎 Webact is a tiny library that helps you create web components in a manner similar to Vue and React. Without the need for heavy tools like

Vue 3 invenio API and wrapper components

Vue 3 invenio API and wrapper components

Comments
  • Two lexical.dev.js!

    Two lexical.dev.js!

    I run npm i and find this in

    - node_modules
      - ...
     - lexical-vue
        - dist
        - node_modules
          - lexical
            - **Lexical.dev.js**
    

    This BUG makes my program can not get current EditorState. Because read EditorState through lexical-vue, it will load Lexical.dev.js file in lexical-vue And then read EditorState through lexical, it will load Lexical.dev.js file in lexical,it turns out get error. If I use pnpm i, then there is only dist dir in lexical-vue. My env

    opened by aquarius-wing 1
  • Is it possible to work with Nuxt3?

    Is it possible to work with Nuxt3?

    Hello, I really liked the framework.

    But there was a need to use with Nuxt3. I am not very versed in JS and do not understand the essence of the error.

    I copied the example code into the component, but I get an error: [h3] [unhandled] H3Error: Class extends value undefined is not a constructor or null

    opened by nsefh 5
Releases(v0.1.7)
Owner
Robert Soriano
[object Object]
Robert Soriano
HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

Evandro C. Severgnini 0 Aug 10, 2021
A fullscreen components for vue2, supports single page applications

Quick start @hyhello/vue-fullscreen The @hyhello/vue-fullscreen component for vue2, supports single page applications.

Hyhello 2 Mar 28, 2022
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

null 647 Oct 4, 2022
Handling Google sign-in and sign-out for Vue.js applications

vue-google-oauth2 Handling Google sign-in and sign-out for Vue.js applications. This package is updated to support detection of disabled cookies. This

JunGroupProductions 0 Jan 11, 2021
Handling Google sign-in and sign-out for Vue3 applications.

vue3-google-oauth2 Handling Google sign-in and sign-out for Vue3 applications. Please refer to here for Vue2 applications. Front-end Demo Installation

Jeongwoo Ahn 44 Sep 28, 2022
Survey builder for vue.js applications

vue-survey-builder This is a survey builder component for vue.js applications. How to install You can install the component using npm i -S vue-survey-

null 104 Aug 10, 2022
Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Rogério Taques 10 Sep 19, 2022
A framework for building VR applications with Vue

A Wrapper of Panolens for building VR applications with Vue based on threejs

Mudin Ibrahim 445 Sep 30, 2022
Wowerlay is a popover library for Vue 3 applications.

Wowerlay is a popover library for Vue 3 applications. It isn't an alternative for Popper. Demos/Examples You can see all examples Here. Intallation Fo

Wope 6 Apr 29, 2022
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Imperva 11 Mar 22, 2022