Phaser parent not taking effect

[jordancitylogic]

The issue seems to be with the components/Game.vue. The div is broken and there should only be one item in the template tag. This should fix the issue:

<template>
  <div>
    <div id="game-container"></div>
    <div class="placeholder" v-if="!downloaded">
      Downloading ...
    </div>
  </div>
</template>

[Sun0fABeach]

Hi. Thanks for the feedback!

Vue templates allow multiple root elements as long as you put a series of v-if/v-else-if/v-else on them, so that only one gets rendered at a time. While your solution succeeds at removing the error you're getting, I think the underlying issue is something else:
In Vue, when you make a change to the DOM, you have to explicitly wait for the DOM update to finish using $nextTick before accessing any newly inserted elements, which I didn't do when launching Phaser. You can read about the subject matter here.

I committed a probable solution, can you please report back if it solves the issue for you?

[jordancitylogic]

Hey, thanks for the fast response. The update is working perfectly, very much appreciated.