Can't get an instance of editor with useEditor() in Nuxt 3

[ynechaev]

I am exposing lexical-vue with the following plugin:

// plugins/lexical.client.ts

import {
  useEditor,
  LexicalComposer,
  LexicalContentEditable,
  LexicalPlainTextPlugin,
} from 'lexical-vue'

export default defineNuxtPlugin(nuxtApp => {

  nuxtApp.vueApp.component('LexicalComposer', LexicalComposer)
  nuxtApp.vueApp.component('LexicalContentEditable', LexicalContentEditable)
  nuxtApp.vueApp.component('LexicalPlainTextPlugin', LexicalPlainTextPlugin)

  return {
    provide: {
      useEditor,
    }
  }

})

So inside the component when I try using it as following:

<template>
    <ClientOnly>
      <LexicalComposer :initial-config="config">
        <LexicalPlainTextPlugin>
          <template #contentEditable>
            <LexicalContentEditable />
          </template>
          <template #placeholder>
            <div>
              What do you want to write about today?
            </div>
          </template>
        </LexicalPlainTextPlugin>
      </LexicalComposer>
  </ClientOnly>
</template>

<script setup>
const {
  $useEditor: useEditor,
} = useNuxtApp()

const config = {
  editable: true,
  theme: { },
  onError(error) {
    console.error(error)
  },
}

const editor = useEditor()

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

</script>

I get an error: useEditor is not a function and trace shows <LexicalComposer /> is required error message (which is a bit misleading, because it throws when editor in underlying function is null

[yohames]

Have you figured out a way to implement it in Nuxt 3?

[jswhisperer]

probably add .client.ts