使用 Nuxt3 安装 datagrid librairie 时出错

Question

我有一个 Nuxt3 项目，我正在尝试添加一个名为“@revolist/vue3-datagrid”的库。我运行了命令“npm i @revolist/vue3-datagrid --save”，如库文档中所示。但是，由于文档解释了 Vue 3 而不是 Nuxt3 的安装，因此我不确定如何完成为此库配置 Nuxt3 应用程序。我陷入困境，因为运行 npm i 时出现错误，如下所示： ERROR self is not Define at directory/my_project/node_modules/@revolist/vue3-datagrid/dist/vgrid.js:1:522。谁能帮我解决这个问题吗？”

我尝试首先通过在模块部分添加 nuxt.config.js '@revolist/vue3-datagrid' 来解决我的问题，但它仍然不起作用。在我在插件目录中添加以下名为“datagrid.js”的文件后：

import { VGrid } from "@revolist/vue3-datagrid";

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(VGrid, {})
})

Answer 1

你需要使用这个方法： 插件/grid.client.ts

import {VGridPlugin} from "@revolist/vue3-datagrid";
export default defineNuxtPlugin(async (nuxtApp) => {
  nuxtApp.vueApp.use(VGridPlugin)
});

在页面或组件.vue中

<ClientOnly>
  <vue-data-grid theme="compact" :source="rows" :columns="columns" />aa
</ClientOnly>