11

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?

gsundberg
  • 437
  • 1
  • 4
  • 14
  • 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`? – gsundberg 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
  • @kissu your answer is related to nuxt 2, which is completely different. – Syffys Jul 03 '22 at 19:51
  • @Syffys not completely different no. Maybe a bit regarding the syntax but the issue is the same. – kissu Jul 03 '22 at 20:08
  • Did you ever find a solution for this? I have the exact same problem. – Joe Bauer Jul 27 '22 at 14:15

3 Answers3

17

Solution for nuxt 3:

Nuxt will automatically read the files in your plugins directory and load them. You can use .server or .client suffix in the file name to load a plugin only on the server or client side.

For example:

plugins/apexcharts.client.ts

Everything is so simple! And that is why we love nuxt ❤️

Solution for nuxt 2 (to show the difference):

nuxt.config.ts

  plugins: [
    {src: '~/plugins/apexcharts', mode: 'client'}
  ],

This is only for nuxt 2 because All plugins in your nuxt 3 plugins/ directory are auto-registered, so you should not add them to your nuxt.config separately.

Dmitry Kaltovich
  • 2,046
  • 19
  • 21
  • When I use the .client trick I get "Failed to resolve component: font-awesome-icon". Is there some special trick to make this work? – user128638 Feb 26 '23 at 01:56
1

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
    }
  }

})
HexXx
  • 252
  • 3
  • 8
1

To tag along with the given correct answer here,

If you're trying to install and use a third party NPM package, and running into "window is not defined" type errors, you can load the package as a plugin as follows (eg WAD)

npm install web-audio-daw

// plugins/wad.client.ts
import Wad from "web-audio-daw"
export default defineNuxtPlugin(nuxtApp => {
  return {
    provide: {
      Wad,
    }
  }
})

// pages/whatever.vue
<script lang="ts" setup>
const { $Wad } = useNuxtApp();
// Can use $Wad normally from here on out
</script>
JasonHorsleyTech
  • 392
  • 1
  • 5
  • 11