Nuxt 3 SSR

[idesignzone]

Following the documentation for adding plyr as a plugin to Nuxt, "vue-plyr" is not globally registered.

There is also a warn message
WARN Plugin /plugins/vue-plyr.js has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin.

[ishaiavrahami]

did you solve this?

[idesignzone]

did you solve this?

I gave up Plyr. Using html5 now.

[ohnosharks]

Got the same error following the docs, this fixed it for me:

// plugins/vue-plyr.client.ts
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'

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

<ClientOnly>
	<vue-plyr ref="plyr" :options="{
		autoplay: true,
		muted: false,
		volume: 1,
		}">
		<div class="plyr__video-embed">
			<iframe
			:src="`https://www.youtube.com/embed/${video.id}`"
			allowfullscreen
			allowtransparency
			allow="autoplay"
			></iframe>
		</div>
	</vue-plyr>
</ClientOnly>