I'm trying to embed a Twitch player on a website using Vue 2 with Nuxt. A minimal component would look like this:
<template>
<div>
<div id="twitchPlayer"></div>
</div>
</template>
<script>
export default {
data() {
return {
player: null,
};
},
methods: {
setupPlayer() {
const tempPlayer = new Twitch.Player("twitchPlayer", {
width: "100%",
height: "500px",
video: 1093956452,
});
// works fine
console.log(player);
// throws error
this.player = tempPlayer;
},
},
mounted() {
this.setupPlayer();
},
};
</script>
I imported the Twitch js file in the head
element in nuxt.config.js
.
The player works fine as long as the scope is within the setupPlayer()
method. Once I try to assign the tempPlayer
object to this.player
(to access it from other methods) I get the following error:
Firefox:
Permission denied to access property "__v_isRef" on cross-origin object
Chrome:
Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.
at isRef (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:1150:22)
So apparently isRef
is being called when assigning this.player = tempPlayer
and this causes the error.
However, if I use the same component in a standard Vue app (without Nuxt), it works just fine.
How would one fix this issue? I don't want to have to go back to standard Vue because of something like this.
Thank you.
CodePudding user response:
My reference Vue app, in which I had no issues, had a different version than the Nuxt app. Downgrading Vue (from 2.7.8 to 2.6.14) solved the problem.