仅客户端next 3 Vue插件

Question

我是next和Vue的新手，所以别对我太苛求。我试图使用ve3 -video-player在我的next 3应用程序中创建一个视频播放器组件，该组件似乎不支持SSR，基于以下错误，当我在视频组件中导入它时:

ReferenceError: navigator is not defined

即使组件被<ClientOnly>包装，这个错误仍然存在。因此，根据我在next 3文档中看到的内容，我认为我会创建一个位于plugins/vue3-video-player.client.js的仅客户端插件，包含以下内容:

import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vue3VideoPlayer)
})

但是当我尝试在我的组件中使用它作为<vue3-video-player>时，我得到以下错误:

[Vue warn]: Failed to resolve component: vue3-video-player

所以我想我的问题是如何使用next 3插件创建一个仅客户端的Vue组件?还是有一种完全不同的方法会更好?

Answer 1

nuxt 3解决方案:

next将自动读取插件目录中的文件并加载它们。您可以在文件名中使用.server或.client后缀，仅在服务器端或客户端加载插件。

例如:

plugins/apexcharts.client.ts

一切都那么简单!这就是为什么我们喜欢nuxt❤️

---

nuxt 2的解决方案(显示差异):

nuxt.config.ts

plugins: [
{src: '~/plugins/apexcharts', mode: 'client'}
],

这只适用于nuxt 2，因为你的下一个plugins/目录下的所有插件都是自动注册的，所以不应该将它们分别添加到您的nuxt.config中。

Answer 2

您可以尝试提供一个辅助函数。如文档中所述。

import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
export default defineNuxtPlugin((nuxtApp) => {

return {
provide: {
Vue3VideoPlayer
}
}
})

Answer 3

在这里标记给定的正确答案，

如果你正在尝试安装和使用第三方NPM包，并且遇到"窗口未定义";类型错误时，你可以像下面这样将包作为插件加载(例如WAD)

npm install web-audio- day

// plugins/wad.client.ts
import Wad from "web-audio-daw"
export default defineNuxtPlugin(nuxtApp => {
return {
provide: {
Wad,
}
}
})

// pages/whatever.vue
<script lang="ts" setup>
const { $Wad } = useNuxtApp();
// Can use $Wad normally from here on out
</script>