How to use in vue3 + vite?

[catacode]

Can you provide a case of vue3? I have try use mavonEditor under the syntax of vue3, But it failed。

Please give me a sample to depend!

![Uploading image.png…]()

[ygj6]

Vue3 version of mavon-editor should be installed: npm i mavon-editor@3.0.0-beta

Usage:

    // 全局注册
    // import with ES6
    import { createApp } from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    createApp(App).use(mavonEditor).mount('#app')

Reference Documents: https://github.com/originjs/mavonEditor-next#use-%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5

[catacode]

Thank you very much, It's done.

1. first install dependencies npm i mavon-editor@3.0.0-beta

2. vue code

   
   <template>
   <h1>mavo editor</h1>
   <div id="mavon-editor-id">
   <mavon-editor v-model="editor_value" />
   </div>
   </template>

[barbirict]

Hi, I would just like to add this here, in case anyone is trying to use this editor with Vite SSR, since if you import it normally you'll get window not definded errors.

Code:

import { definePlugin } from '/@src/app'
// @ts-ignore
import { defineAsyncComponent } from 'vue'

export default definePlugin(({ app }) => {
  app.component(
    'mavon-editor',
    defineAsyncComponent({
      // @ts-ignore
      loader: () =>
        import('mavon-editor').then(
          (mod) => mod.mavonEditor
        ),
    })
  )
})