仅限客户端的 Nuxt 3 Vue 插件

Question

我是 Nuxt 和 Vue 的新手，所以不要介意。我正在尝试使用vue3-video-player在我的 Nuxt 3 应用程序中创建一个视频播放器组件，但它似乎不支持 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]: Failed to resolve component: vue3-video-player

所以我想我的问题是如何使用 Nuxt 3 插件创建仅客户端的 Vue 组件？或者是否有一种完全不同的方法效果更好？

Answer 1

解决方案nuxt 3：

\n

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

\n

例如：

\n

plugins/apexcharts.client.ts

\n

一切就是这么简单！这就是为什么我们喜欢nuxt\xe2\x9d\xa4\xef\xb8\x8f

\n\n

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

\n

nuxt.config.ts

\n

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

\n

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

\n