Nuxt3 与 vue-plyr for YouTube - 文档未定义参考错误

Question

我正在尝试使用新的 Nuxt3 应用程序来实现 vue-plyr，以便我可以将自定义的 YouTube 和 Vimeo 视频嵌入到页面中。

我按照 vue-plyr npm 页面底部的 Nuxt (Vue 2.x) 说明在 Nuxt 中使用该组件，方法是在 plugins 目录中创建一个文件并将组件包装在

<ClientOnly>

中标签，但我仍然收到错误。

/plugins/vue-plyr.ts

import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr'
import 'vue-plyr/dist/vue-plyr.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VuePlyr, { plyr: {} })
})

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    plugins: [
        { src: '~/plugins/vue-plyr', mode: 'client' }
    ]
})

app.vue

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <div>
        Video
        <ClientOnly>
          <vue-plyr>
            <div class="plyr__video-embed">
              <iframe
                src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
                allowfullscreen
                allowtransparency
                allow="autoplay"
              ></iframe>
            </div>
          </vue-plyr>
        </ClientOnly>
    </div>
  </div>
</template>

<script lang="ts">

</script>

错误

ReferenceError: document is not defined
    at C:\Users\benm\Documents\Coding\My Projects\yt-test\node_modules\vue-plyr\dist\vue-plyr.ssr.js:5913:11
    at Object.<anonymous> (C:\Users\benm\Documents\Coding\My Projects\yt-test\node_modules\vue-plyr\dist\vue-plyr.ssr.js:5924:2)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async __instantiateModule__ (file:///C:/Users/benm/Documents/Coding/My%20Projects/yt-test/.nuxt/dist/server/server.mjs:4156:3)

Answer 1

我找到了一种让它发挥作用的方法。在您的插件文件夹中创建一个名为的文件

plyr.client.ts

。这都是关于

.client.ts

。添加此内容作为其内容：

import VuePlyr from "vue-plyr/dist/vue-plyr.ssr";

const VuePlayer = VuePlyr;

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VuePlayer, { plyr: {} });
});

在

nuxt.config.ts

中添加：

css: ["@/assets/css/main.scss", "~/node_modules/vue-plyr/dist/vue-plyr.css"],

所以在这里添加节点模块的 css，然后您可以在页面/组件中使用它：

<ClientOnly>
  <vue-plyr>
    <div class="plyr__video-embed">
    <iframe
      src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    ></iframe>
    </div>
  </vue-plyr>
</ClientOnly>