0

I am new to Nuxt and Vue, so go easy on me. I am trying to create a video player component in my Nuxt 3 app using vue3-video-player, which doesn't seem to support SSR based on the following error I get when I import it in my video component:

ReferenceError: navigator is not defined

This error persists even if the component is wrapped with <ClientOnly>. So, based on what I saw in the Nuxt 3 Documentation I thought I would create a client-only plugin located at plugins/vue3-video-player.client.js with the following contents:

import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3VideoPlayer)
})

But when I try to use it in my component as <vue3-video-player>, I get the following error:

[Vue warn]: Failed to resolve component: vue3-video-player

So I guess my question is how do I create a client-only Vue component using Nuxt 3 plugins? Or is there an entirely different approach that would work better?

Gunnar Sundberg
  • 151
  • 1
  • 11
  • 1
    Checked my answer here? https://stackoverflow.com/a/67751550/8816585 (at the bottom) – kissu May 24 '22 at 19:24
  • So say I went with the dynamic import at the bottom of your answer. How would I do the equivalent of `import x from 'some_module` using `import()` as you did in `components`? – Gunnar Sundberg May 24 '22 at 20:50
  • We have the exact same question here: https://stackoverflow.com/a/67825061/8816585 – kissu May 24 '22 at 20:56

0 Answers0