如何在Nuxt3中集成mavon-editor并在模板中使用组件？

1. 完善Nuxt插件配置 #

修改你的插件文件（比如plugins/mavon-editor.js），除了通过provide暴露组件，还需要全局注册组件，同时引入编辑器必需的样式文件：

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css' // 必须引入样式，否则编辑器显示异常

export default defineNuxtPlugin((nuxtApp) => {
  // 全局注册组件，让模板能识别<mavon-editor>标签
  nuxtApp.vueApp.component('MavonEditor', mavonEditor)
  
  // 保留provide，方便在脚本中直接调用组件构造函数
  return {
    provide: {
      mavonEditor
    }
  }
})

2. 简化app.vue代码 #

组件全局注册后，无需再手动通过useNuxtApp获取实例，直接在模板中使用标签即可：

<template>
  <div>
    <MavonEditor />
    <!-- 也可以用短横线格式：<mavon-editor /> -->
  </div>
</template>

<script setup>
// 若需在脚本中操作组件，仍可通过以下方式获取
// const { $mavonEditor } = useNuxtApp()
</script>

关键说明 #

• 之前的方案仅通过provide暴露了组件构造函数，但未在Vue组件系统中完成注册，因此模板无法识别<mavon-editor>标签。
• 全局注册后，所有页面和组件的模板都能直接使用该组件，无需重复局部注册。
• mavon-editor的样式文件必须手动引入，否则编辑器会出现布局错乱、样式缺失的问题。

内容的提问来源于stack exchange，提问作者sai Kodavali