Closed plategea closed 3 years ago
Try following the instructions: https://github.com/avidofood/vue-responsive-video-background-player#3-only-for-nuxtjs-users
Remove the plugins/vue-video-background.js
file and only include it in the nuxt.config.js
file, as a plugin.
Hi, I have the same issue. Also using nuxt.
I have done the following. npm install npm install vue-responsive-video-background-player
added this to the nuxt.config.js plugins: [ { src: '~/plugins/vue-video-background', ssr: false } ]
Can I skip step 2 for nuxt?
I get the following error during build
ERROR Plugin not found: ...\plugins\vue-video-background 22:37:53
at node_modules\@nuxt\builder\dist\builder.js:6066:15 at async Promise.all (index 2) at async Builder.build (node_modules\@nuxt\builder\dist\builder.js:5631:5) at async Object._buildDev (node_modules\@nuxt\cli\dist\cli-dev.js:106:5) at async Object.startDev (node_modules\@nuxt\cli\dist\cli-dev.js:64:7) at async Object.run (node_modules\@nuxt\cli\dist\cli-dev.js:51:5) at async NuxtCommand.run (node_modules\@nuxt\cli\dist\cli-index.js:2803:7)
What am I missing?
Hi,
Nuxtjs works with vuejs 2, install : For Vue 2.x.x : npm install vue-responsive-video-background-player@1.2.2
I run it on typescript with decorator, but on js I think is the same
Put this in a file on plugins folder ` import { Plugin } from 'vue-responsive-video-background-player'
Vue.use(Plugin);`
Add this to the nuxt.config.js plugins section
And declare the component on your component like this `import VideoBackground from 'vue-responsive-video-background-player'
@Component({ components: { VideoBackground } })`
On template `<VideoBackground src="/......mp4" style="max-height: 400px; height: 100vh"
Hello welcome!
`
Put your video on static folder for nuxtjs also, not in assets.
And it's works fine for me.
thanks @sortidocorps @itsAnuga for replying for me (I appreciate it)
@plategea and @robin6505 did you resolve your issue?
Hi guys, thanks for your response.
I havent been able to get it to work yet. Trying to adjust the answer of @sortidocorps to js.
I have done the following:
npm install vue-responsive-video-background-player@1.2.2
in plugins folder, created a file (vue-video-background.js)
import Vue from 'vue'
import { Plugin } from 'vue-responsive-video-background-player'
Vue.use(Plugin);
added this to nuxt.config.js
plugins: [
{
src: '~/plugins/vue-video-background.js',
ssr: false
}
],
created a component called Hero.vue
<template>
<VideoBackground src="/static/video/banner-video.mp4" style="max-height: 400px; height: 100vh" > <h1 style="color: white">Hello welcome!</h1> </VideoBackground>
</template>
<script>
import VideoBackground from 'vue-responsive-video-background-player'
export default {
name: 'Hero',
components: {
VideoBackground
}
}
</script>
Currently I get the following error. When I go the the webpage
node_modules\vue-responsive-video-background-player\dist\index.common.jsopen in editor
return styleElement
}
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
Compilation is successful
I have finally resolved the issue.
(I'm using Nuxt)
there were multiple things I did wrong:
The file structure is now the following: Hero.vue (which is loaded in index.vue)
<template>
<video-background
:src="require('~/assets/banner-video.mp4')"
:poster="require('~/assets/cover-image.jpg')"
style="max-height: 400px; height: 100vh;"
>
<h1 style="color: black;">Hallo welcome!</h1>
</video-background>
</template>
plugins/vue-video-background.js
import Vue from 'vue'
import VideoBackground from 'vue-responsive-video-background-player'
Vue.component('video-background', VideoBackground);
in nuxt.config.js add:
plugins: [
{
src: '~/plugins/vue-video-background.js',
mode: 'client'
}
],
hi,my code is plugins/vue-video-background.js
import Vue from 'vue' import VideoBackground from 'vue-responsive-video-background-player' Vue.component('video-background', VideoBackground);
and nuxt.config.js plugins: [ { src: '~/plugins/vue-video-background', ssr: false } ], but notworking ! my error code index.common.js?cf1a:3565 Uncaught TypeError: Object(...) is not a function at Module.fb15 (index.common.js?cf1a:3565) at webpack_require__ (index.common.js?cf1a:21) at eval (index.common.js?cf1a:85) at eval (index.common.js?cf1a:88) at Object../node_modules/vue-responsive-video-background-player/dist/index.common.js (app.js:425) at webpack_require (runtime.js:854) at fn (runtime.js:151) at eval (vue-video-background.js?abe3:1) at Module../plugins/vue-video-background.js (app.js:521) at webpack_require__ (runtime.js:854)