I have a nuxt app which uses the vue-plyr plugin to play videos. I've registered the plugin like this

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

Vue.use(VuePlyr, {
  plyr: {}
})

and added it to nuxt.config.js

plugins: [
  {
    src: '~/plugins/plyr.client.js',
    mode: 'client'
  }
],

but when I import it inside a component

import VuePlyr from 'vue-plyr'

I always get an error saying

document is not defined

The component itself is also wrapped in a <client-only></client-only> tag.

Am i missing something with my implementation?
Is there any other way to import the plugin

I'm using node-14.17.6 and nuxt-2.15.6

CodePudding user response：

You don't need plyr.client.js but plyr.js if you already have mode: 'client'.
Also, why do you import it again if you have it as a plugin? It is globally available so you could start using it directly.

<template>
  <client-only>
    <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>
  </client-only>
</template>

Depending on the code you're using below, you may also check that this is not being called server side as shown here: https://stackoverflow.com/a/67751550/8816585

Updated with a more explicit example.