仅客户端NUXT 3 VUE插件

Question

我是Nuxt和Vue的新手，所以请轻松对我。我正在尝试使用 vue3-vue3-video-player ，这似乎不基于以下错误支持SSR，当我在视频组件中导入它时会遇到的：

reference eRseRor：Navigator未定义

即使使用<<＆lt; clientonly＆gt; 。因此，根据我在 nuxt 3文档我想我想创建位于>插件/vue3-video-player.client.js的仅限客户端插件，具有以下内容

import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'

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

： player＆gt; ，我会收到以下错误：

[vue warn]：无法解析组件：vue3-video-player，

所以我想我的问题是如何创建一个仅客户端VUE使用NUXT 3插件的组件？还是完全不同的方法可以更好？

Answer 1

NUXT 3的解决方案：

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

例如：

插件/apexcharts.client.ts

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

---

nuxt 2的解决方案（显示差异）：

nuxt.config.ts

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

这仅适用于<代码> NUXT 2 因为NUXT 3 插件/目录均为自动注册单独使用nuxt.config。

Answer 2

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

如果您要安装和使用第三方NPM软件包，并且插入“窗口未定义”键入错误，您可以将软件包作为插件加载为如下（例如 wad ）

npm安装Web-audio-daw

// 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>

Answer 3

您可以尝试提供辅助功能。如 docs 。

import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'

export default defineNuxtPlugin((nuxtApp) => {
  
  return {
    provide: {
      Vue3VideoPlayer
    }
  }

})