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!

[ygj6]

Vue3 version of mavon-editor should be installed: npm i [email protected]

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 [email protected]

2. vue code

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

<script lang="ts">
import { defineComponent } from "vue";
import Mavon from "mavon-editor";
import 'mavon-editor/dist/css/index.css'

export default defineComponent({
  name: "MarkdownEditor",
  components: {
    "mavon-editor": Mavon.mavonEditor,
  },
  emits: ["change"],
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: function (c: string) {
      this.editor_value = c;
    },
    editor_value: function (v: string) {
      this.$emit("change", v);
    },
  },
  data() {
    return {
      editor_value: "hello china",
    };
  },
});
</script>

<style>
</style>

[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
        ),
    })
  )
})