I attempted to integrate mavonEditor as a markdown editor in my most recent vue3.js application while using Vite for building Vue.js apps. Initially, I followed the mavonEditor documentation but encountered an issue where the mavon component was not defined.
I proceeded to install mavon-editor(v2.10.4) using npm and then made changes to the main.js as shown 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");
Following this, I tried incorporating the editor component into App.vue like so.
<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>
Upon checking the browser (Chrome), no items were displayed. Instead of the editor, an error was logged in the console.
Uncaught ReferenceError: mavon is not defined
I am seeking guidance on the correct usage of mavon-editor in Vue3.js. Can anyone provide assistance, please?