0

I'm trying to implement the vue-plyr with a new Nuxt3 application, so that I can embed customized YouTube and Vimeo videos into the pages.

I have followed the instructions for Nuxt (Vue 2.x) at the bottom of the vue-plyr npm 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)
ben mi
  • 65
  • 6
  • @kissu I looked at those answers, but none of them worked for me. I am still getting the same error. I don't import the component extra in the page so the answer you linked doesn't work here. Perhaps because I'm using vuejs3 and nuxt3... – ben mi May 26 '22 at 11:26

1 Answers1

2

i found a way to get it working

so in your plugin folder create a file called plyr.client.ts its al about the .client.ts

add this as its contents


const VuePlayer = VuePlyr;

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

in nuxt.config.ts add

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

so here you add the css of the node module and then you can use this in your pages/component

        <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>```
Nossie
  • 21
  • 3
  • It's always important to use such a thing like videoPlayer on client, never during SSR. that's why using plugin suffixed client works, good job – devzom Nov 04 '22 at 17:35