在Nuxt3上 使用不了 报Elemet is not defined

[cainiaodjm]

bug 描述

请输入内容……

你预期的样子是？

请输入内容……

系统和浏览器及版本号

• 操作系统
• 浏览器和版本

wangEditor 版本

请输入内容……

demo 能否复现该 bug ？

能/不能

• 中文 demo https://www.wangeditor.com/demo/
• English demo https://www.wangeditor.com/demo/?lang=en

在线 demo

请尽量提供在线 demo （推荐以下网站），帮助我们最低成本复现 bug

• https://codesandbox.io/
• https://codepen.io/
• https://stackblitz.com/

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一
• 步骤二
• 步骤三

[Naf9nahz]

可以通过插件解决

• 新建一个只在client执行的插件 -导入编辑器 -provider出去
• 在组件中使用 useNuxtApp() 获取编辑器
• 使用动态组件在模板中调用

  //editor.client.ts
  import { defineNuxtPlugin } from '#app'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { Boot } from '@wangeditor/editor'
  export default defineNuxtPlugin(() => {
  return {
  provide: {
    Editor,
    Toolbar,
    Boot,
  },
  }
  })

const { $Editor, $Toolbar, $Boot } = useNuxtApp()

     <component
        :is="$Toolbar"
      />
      <component
        :is="$Editor"
      />

[phcent]

在plugins下创建wangEditor.client.ts

import { defineNuxtPlugin } from "#app";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Editor',Editor).component('Toolbar',Toolbar);
});

[will196]

并不行

[11003]

  <ClientOnly>
xxxx
    </ClientOnly>

[lily1115]

在wangeditor组件里面 比如RichEditor.vue 文件名 改为RichEditor.client.vue 就行了 nuxt3文档上面有写 第三方组件 不想服务端渲染可以这样加