如何在Nuxt3引入mavonEditor使用

[freezyh]

由于Nuxt升级了配置方式也发生了改变，如何正常引入该插件

[zhouzhouyaya]

由于Nuxt升级了配置方式也发生了改变，如何正常引入该插件

解决了吗

[xing403]

1. install mavon-editor@next, current version is 3.0.1
2. config nuxt.config

export default defineNuxtConfig({
  css: [
    'mavon-editor/dist/css/index.css', // import mavon-editor css
  ],
  plugins: [
    { src: '~/plugins/mavon-editor', mode: 'client' } // usage mavon-editor component
  ]
})

3. edit ~/plugins/mavon-editor

import mavonEditor from 'mavon-editor';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(mavonEditor);
})

4. custom Editor component

<template>
  <ClientOnly>
    <mavon-editor v-model="model" w-full h-730px :toolbars="toolbarsConfig"/>
  </ClientOnly>
</template>

<script setup lang="ts">
const model = defineModel({ type: String }) // defineModel on Vue 3.4
const toolbarsConfig = {
  // ... toolbars config
}
</script>