Client-only Nuxt 3 Vue plugin

user_11948545 0
Viewed 1656

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?

nuxtjs3 nuxt.js vue.js javascript
1 Answers

you could try to provide a helper function. As mentioned in the docs.

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

export default defineNuxtPlugin((nuxtApp) => {
  
  return {
    provide: {
      Vue3VideoPlayer
    }
  }

})
user_38077780
Related