Access Vue this from the scene object

[schatteleyn]

Hey there, I'm trying to access the "vue this" inside the scene object where all the magic happens, as to be able to interact between the game and the app. I've tried many ways but can't seem to find a way to properly do it, and the documentation is a bit lacking on the subject. What's the correct way to get the vue context inside the game component ? Also, is this the right way to create interaction between the two parts ?

[jdnichollsc]

Can you use an event emitter approach instead?

[schatteleyn]

Well that's what I wanted to do, but I still need this.$emit inside my create() method, thus I need access to vue this

[jdnichollsc]

Well that's what I wanted to do, but I still need this.$emit inside my create() method, thus I need access to vue this

Try using a third party EventEmitter system, e.g: https://www.npmjs.com/package/eventemitter3

[jdnichollsc]

I mean, Phaser has an EventEmitter system and VueJS too, so try using another alternative so that they can communicate, it could even be with Service workers, imagination is the limit! <3

[Marchiuzzz]

You probably already found a solution but I'll just share how I did it for any future readers. Declare a variable "vue" (or whatever you want to call it) outside export default block and then assign this variable in the mounted method. Example:

<script>
var vue;
var game = {
 scale: {...},
 scene: {... <we can access vue's property myText with vue.myText here> ...},
 physics: {...}
}
export default {
 data(){
  return {
   myText: '',
  };
 },
 mounted(){
  vue = this; 
 }
}
</script>

Then inside phaser game code you can access the vue variable - which will be the instance of vue and therefore you will be access methods, properties, etc. like so vue.myText

[SunKechang]

You probably already found a solution but I'll just share how I did it for any future readers. Declare a variable "vue" (or whatever you want to call it) outside export default block and then assign this variable in the mounted method. Example:

<script>
var vue;
var game = {
 scale: {...},
 scene: {... <we can access vue's property myText with vue.myText here> ...},
 physics: {...}
}
export default {
 data(){
  return {
   myText: '',
  };
 },
 mounted(){
  vue = this; 
 }
}
</script>

Then inside phaser game code you can access the vue variable - which will be the instance of vue and therefore you will be access methods, properties, etc. like so vue.myText

dude, you've saved my life!!!!