仅限客户端的Nuxt 3 Vue插件

Question

我对Nuxt和Vue都不太熟悉，请见谅。我正在尝试在我的Nuxt 3应用程序中使用 vue3-video-player 创建一个视频播放器组件，但当我将其导入到我的视频组件中时，出现以下错误提示，表明它似乎不支持SSR：

ReferenceError: navigator is not defined

即使将该组件包装在<ClientOnly>内，此错误仍然存在。所以，根据我在Nuxt 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]: 无法解析组件：vue3-video-player

因此，我想知道如何使用Nuxt 3插件创建仅客户端的Vue组件？或者是否有完全不同的方法可以更好地解决问题？

- gsundberg

---

你检查了这里的答案吗？https://dev59.com/4MDqa4cB1Zd3GeqPnN_A#67751550（在底部） - kissu

假设我采用了您回答底部的动态导入方式。那么，我如何使用import()来实现与您在components中所做的import x from 'some_module'等价的操作？ - gsundberg

我们在这里有完全相同的问题：https://dev59.com/S8Dqa4cB1Zd3GeqPovA-#67825061 - kissu

@kissu，你的回答与 Nuxt 2 相关，这是完全不同的。 - Syffys

@Syffys并不完全不同。也许在语法方面有些不同，但问题是一样的。 - kissu

你有没有找到这个问题的解决方案？我也遇到了完全相同的问题。 - Joe Bauer

Answer 1

nuxt 3 的解决方案：

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

例如：

plugins/apexcharts.client.ts

一切都是如此简单！这就是我们喜欢 nuxt ❤️ 的原因。

---

nuxt 2 的解决方案（显示区别）：

nuxt.config.ts

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

这仅适用于nuxt 2，因为在nuxt 3中您plugins/目录中的所有插件都将自动注册，所以您不应该将它们单独添加到nuxt.config中。

- Dmitry Kaltovich

---

当我使用 .client 技巧时，出现了“无法解析组件：font-awesome-icon”的错误。有什么特殊的技巧可以让它正常工作吗？ - user128638

这实际上是非常不准确的，Nuxt 3仍然会加载你所拥有的所有内容，你会在生产构建的入口JS文件中得到那些导入的库/代码。 - undefined

Answer 2

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

文档

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

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

})

- HexXx

Answer 3

跟随正确答案这里，

如果您正在尝试安装和使用第三方NPM包，并遇到“window未定义”类型的错误，您可以按照以下方式将包加载为插件（例如WAD）：

npm install 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>

- JasonHorsleyTech

---

如果你必须使用 const { $Wad } = useNuxtApp() 进行解构，那么这个插件似乎并没有为你节省太多。你可以在使用它的页面中导入 Wad。 - Alpha Huang

谢谢。你如何在Nuxt 3中使用插件的params？例如$Wad(param1,param2)？ - v3nt

现在我怎么添加 mode:client？ - Sharif