Nuxt3 implementation (Document is not defined error)

[bennymi]

Hi, thanks for your work on this package! I would love to use it for a project but am currently still getting an error when trying to implement it with Nuxt3. I created a question for it on stackoverflow. Do you perhaps have an idea on how to resolve this or what I might be doing wrong?

I have followed the instructions for Nuxt (Vue 2.x) at the bottom of the read-me page to use the component in Nuxt, by creating a file in the plugins directory and wrapping the component in a <ClientOnly> tag, but I am still getting an error.

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

Error

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)

[skjnldsv]

I'm facing the same issue, I unfortunately have not enough knowledge on nuxt :/

[Jesus82]

My working solution:

plyr.client.ts

import VuePlyr from '@skjnldsv/vue-plyr/dist/index.js'
const VuePlayer = VuePlyr

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