How to use it nuxt js

[GarciaTandela]

Hey i'm trying to use it with nuxt js, but whenever i try it says document not found, can you help me with this

[pmochine]

@YannickSilva I've never used nuxt.js, but I will have a look! Maybe I find something

[GarciaTandela]

Thanks man

[pmochine]

@YannickSilva I'm still working on it. I understand the problem. The thing is that with Nuxt you don't have window.document. But that is not my main problem. It is how I compile the code.

I asked the question here. But I need some time to resolve it.

[GarciaTandela]

I will wait for it bro, no problem

[GarciaTandela]

@pmochine were you able to find a solution to this problem with nuxt js?

[pmochine]

@YannickSilva No :(

[GarciaTandela]

No problem, i wil try do find anothr solution. Thanks for your time and effort

[GarciaTandela]

Hey i found out a very useful post on medium about this problem. https://medium.com/@codebeast_/why-your-third-party-plugin-dont-work-in-nuxt-and-how-to-fix-it-d1a8caadf422

Take a look at it, it should help you

[pmochine]

@YannickSilva thanks. I have two issues. One is address by your medium article. The problem with window. However, I have another problem:

I simply just don't know how I can build my bundles without using vue-cli-service.

That's what I'm asking here https://stackoverflow.com/questions/61409902/vue-how-to-build-bundle-for-nuxt-with-vue-cli-service

[GarciaTandela]

Have you tried to read the nuxt js docs ?

[GarciaTandela]

Bro i tried right now the tips in this blog medium, and your plugin is working very well in nuxt js

[pmochine]

@YannickSilva what exactly did you do? :D

[GarciaTandela]

Nuxt js first server side rendering your web site then it comes to client side, so your component only loads on client side. Whenever it tried to load on server side it fails because it mounted before i could detect any window, so i change it to render only on client side

[pmochine]

@YannickSilva I see. But it would be awesome if you could add some code. I'm sure other people want to see it as well 🙈

Thank you :)

[GarciaTandela]

Yes i can, but i wanted to asked you something. Can you implement a lazy-loading funcionality in your component? I think it would be nice

[pmochine]

@YannickSilva I have to think about it. Because it makes the code much longer. And if people really need lazy-loading, they could just use a wrapper for it. Like this one https://github.com/heavyy/vue-intersect

[pamartn]

Hi guys,

Ran into the same problem and found the solution.
I can make a pull request to add a quick nuxtjs setup tutorial in a markdown file if you want.

Anyway thanks for your work @pmochine this is a very cool plugin !

[pmochine]

@pamartn Oh hi! Thanks for your comment :) Yeah that would be cool. But you could also just add it here as a comment and I would just add it later on. I don't know what you prefer more :)

[skoulix]

Create a new .js file in your plugins folder file e.g. vue-video-background.js

Inside this file use the following:

import Vue from 'vue'
import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground)

Then at your nuxt.config.js locate the part where you declare your plugins and import the file. Example:

plugins: [
  {
    src: '~/plugins/vue-video-background',
    ssr: false
  }
]

Now the component is globally available and can be used at any .vue file without issues.

Hope this helps.

[pmochine]

@skoulix Thank you. I put this later on the readme page

[KaseRadtke]

Create a new .js file in your plugins folder file e.g. vue-video-background.js

Inside this file use the following:

import Vue from 'vue'
import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground)

Then at your nuxt.config.js locate the part where you declare your plugins and import the file. Example:

plugins: [
  {
    src: '~/plugins/vue-video-background',
    ssr: false
  }
]

Now the component is globally available and can be used at any .vue file without issues.

Hope this helps.

Followed this but I still get a "document is not defined" error for the component. Any suggestions as to why? This is my first Nuxt project so while I think I am understanding the cause issue, I do not know how to fix it.

[skoulix]

Create a new .js file in your plugins folder file e.g. vue-video-background.js
Inside this file use the following:

import Vue from 'vue'
import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground)

Then at your nuxt.config.js locate the part where you declare your plugins and import the file. Example:

plugins: [
  {
    src: '~/plugins/vue-video-background',
    ssr: false
  }
]

Now the component is globally available and can be used at any .vue file without issues.
Hope this helps.

Followed this but I still get a "document is not defined" error for the component. Any suggestions as to why? This is my first Nuxt project so while I think I am understanding the cause issue, I do not know how to fix it.

I'm using it with the same way and I don't have any issues. Do you have any other imports? Generally speaking when using Nuxt.js and window or document are undefined you need to call these at the client, both are not available at the server. You can wrap these when the client is there, an example:

if (process.client) { // window, document calls here or any other imports that they are relied to these two }

[KaseRadtke]

Create a new .js file in your plugins folder file e.g. vue-video-background.js
Inside this file use the following:

import Vue from 'vue'
import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground)

Then at your nuxt.config.js locate the part where you declare your plugins and import the file. Example:

plugins: [
  {
    src: '~/plugins/vue-video-background',
    ssr: false
  }
]

Now the component is globally available and can be used at any .vue file without issues.
Hope this helps.

Followed this but I still get a "document is not defined" error for the component. Any suggestions as to why? This is my first Nuxt project so while I think I am understanding the cause issue, I do not know how to fix it.

I'm using it with the same way and I don't have any issues. Do you have any other imports? Generally speaking when using Nuxt.js and window or document are undefined you need to call these at the client, both are not available at the server. You can wrap these when the client is there, an example:

if (process.client) { // window, document calls here or any other imports that they are relied to these two }

It is my only import, just trying to have a video as a background in the default layout. If I add in the video-background component, hot-reload will update the page and show the video just fine. If I reload the page entirely however, that is when it crashes and gives me the document not defined error.

With your last suggestion, I am confused as to where I should have that process.client check at. I read something similar with Nuxt.js documentation and had the code below in my component, but still didn't work.

 <script>
import VideoBackground from 'vue-responsive-video-background-player'

if (process.client) {
  require('~/plugins/vue-video-background')
}

export default {
    name: 'Background',
    components: {
        VideoBackground
    },
}
</script>

[skoulix]

Since you have declared this globally as a plugin at nuxt.config.js, you don't need to explicitly import it again.

Having said that the correct syntax to require it at the client process is the following. Your code should look like this:

<script>
let VideoBackground

if (process.client) {
  VideoBackground = require('vue-responsive-video-background-player');
}

export default {
    name: 'Background',
    components: {
        VideoBackground
    },
}
</script>

It depends with your code really.

[KaseRadtke]

Since you have declared this globally as a plugin at nuxt.config.js, you don't need to explicitly import it again.

Having said that the correct syntax to require it at the client process is the following. Your code should look like this:

<script>
let VideoBackground

if (process.client) {
  VideoBackground = require('vue-responsive-video-background-player');
}

export default {
    name: 'Background',
    components: {
        VideoBackground
    },
}
</script>

It depends with your code really.

Thank you 😀! Managed to get it to work like this

<script>

export default {
name: 'Background',
    mounted (){
        let VideoBackground

        if (process.client) {
        VideoBackground = require('vue-responsive-video-background-player');
        }

    }
}
</script>

[iamdagy]

Hi, just wondering how to use this plugin in Nuxt 3 ?
Nuxt 3 automatically registers all plugins in the plugin folder so no need to add anything in Nuxt.config
As it it runs on the client the plugin name is plugins/videoplayer.client.js
I registered the plugin like this:

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VideoBackground)
})```
Now the question is how to use it in a component or page ?
I haven't been able to render it. I have tried in my index.vue:
```  video-background> </video-background> ``
and  got this error:
``` [Vue warn]: Failed to resolve component: video-background
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[nitro] [dev] [unhandledRejection] TypeError: Invalid value used as weak map key ```
Also tried :
```   <div>{{ $videoplayer }}</div>  ```
and  got this error:
``` [Vue warn]: Property "$videoplayer" was accessed during render but is not defined on instance. ```
I do appreciate your help

[pmochine]

@iamdagy To be honest, I don't know. But I just googled your problem and these were the answers. Maybe it helps you:
https://stackoverflow.com/questions/71601714/how-to-set-compileroptions-iscustomelement-for-vuejs-3-in-laravel-project
https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

[iamdagy]

Thanks @pmochine with your help, the error is not showing in the console. But the video player is not rendering either.
Any ideas?

build:{
        transpile:['videoBackground']
    },

        vue:{
        compilerOptions: {
            isCustomElement: tag => ['video-background'].includes(tag)
        }
    }, ``` 
    ``` index.vue
      <video-background     src="~assets/videos/myvideo.mp4"
      > </video-background> ```

[Ines2108]

Hello @pmochine. I also want to use the video player in nuxt 3 but I can't use it either. Are there any solutions or instructions for nuxt 3? The description only works for nuxt 2.

@iamdagy: Did you find a solution because I have the same problem like you.
Thank you for your help.

[Vertenz]

Hi @pmochine @iamdagy @Ines2108, for NUXT 3 I used directive to make it work. Create plugins directory then add video-bg.client.ts (or any name but .client is obligatory for client side render, cause you don't have the window at ssr) file with

import { defineNuxtPlugin } from "#app";
import { Plugin } from "vue-responsive-video-background-player";

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

then you use the video-background tag

[lisaschumann]

@skoulix may I ask for your help?

I was able to import the component in Nuxt 2 with your suggestion, but then I am getting the following error and cannot seem to get past it:

client.js?06a0:102 TypeError: Object(...) is not a function
    at Proxy.Q (vue-responsive-video-background-player.mjs?5a16:266:1)
    at Vue._render (vue.runtime.esm.js?2b0e:2684:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:3864:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:3446:1)
    at new Watcher (vue.runtime.esm.js?2b0e:3436:1)
    at mountComponent (vue.runtime.esm.js?2b0e:3892:1)
    at Vue.$mount (vue.runtime.esm.js?2b0e:8772:1)
    at init (vue.runtime.esm.js?2b0e:4407:1)
    at hydrate (vue.runtime.esm.js?2b0e:6970:1)
    at hydrate (vue.runtime.esm.js?2b0e:7007:1)

I am on nuxt 2.16.3 and vue 2.7.14

[skoulix]

@skoulix may I ask for your help?

I was able to import the component in Nuxt 2 with your suggestion, but then I am getting the following error and cannot seem to get past it:

client.js?06a0:102 TypeError: Object(...) is not a function
    at Proxy.Q (vue-responsive-video-background-player.mjs?5a16:266:1)
    at Vue._render (vue.runtime.esm.js?2b0e:2684:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:3864:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:3446:1)
    at new Watcher (vue.runtime.esm.js?2b0e:3436:1)
    at mountComponent (vue.runtime.esm.js?2b0e:3892:1)
    at Vue.$mount (vue.runtime.esm.js?2b0e:8772:1)
    at init (vue.runtime.esm.js?2b0e:4407:1)
    at hydrate (vue.runtime.esm.js?2b0e:6970:1)
    at hydrate (vue.runtime.esm.js?2b0e:7007:1)

I am on nuxt 2.16.3 and vue 2.7.14

@lisaschumann Can you make sure that you are using the Vue2 version of this plugin and NOT the Vue3 version?

[lisaschumann]

@skoulix thanks so much! For some reason, after installing the package a second time I must have installed the latest rather than @1.3.1