How to correctly use mavon-editor like markdown editor in Vue3.js apps?

Question

I tried to install mavonEditor as markdown editor for my latest vue3.js app and also used vite for building vue.js apps. First of all, I followed the document of mavonEditor, mavon component is not defined.

I installed mavon-editor(v2.10.4) using by npm. And then, change the main.js like below.

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";

createApp(App).use(mavon).mount("#app");

and I tried to use editor component to App.vue like that.

<template>
  <div>
    <mavon-editor v-model="value" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";

export default {
  setup() {
    const value = ref("its my first mavon editor!");
    return { value };
  },
};
</script>

Open the browser(Chrome), but any items wasn't show. Instead of editor, that error occurred in console.

Uncaught ReferenceError: mavon is not defined

I really want to know how to correctly use mavon-editor in Vue3.js. Does anyone help me, please?

Answer 1

you can add this

app.use(mavonEditor)

and remove mavon from

createApp(App).use(mavon).mount("#app");

hope this help you solve the problem