Issue while using with Vue 3 - Canvas not loaded

[VivianManohar]

Hi,

When I try the given example with Vue 3, the canvas is not rendering on the browser. I only see a blank screen. On inspect elements, I see,

<div id="app" data-v-app=""> <ion-phaser game="[object Object]" initialize="true" class="hydrated"> </ion-phaser></div>

However, whenever I change something within the script tag (like adding a comment), the canvas immediately loads on the browser. But then it disappears again if I refresh the browser. I checked with different browsers as well.
Link to the Vue 3 code - not working

But the same code works fine with Vue 2,
Link to the Vue 2 code - working

Can you please tell me what should I do differently for Vue 3? I'm a newbie to programming, so apologies if I'm missing anything obvious. Thanks.

[jdnichollsc]

Hello,
Let me check, but in the meantime try using "display: block;" from your styles, setting width/height style properties and also remember to enable Web components from your main.js file:
app.config.isCustomElement = (tag) => tag.startsWith("ion-");

Let me know 👍

[VivianManohar]

@jdnichollsc, Thanks for looking into this and for the pointers. I have added them now. But the problem persists. Please let me know when you find a solution, and what more things I can try meanwhile.

[VivianManohar]

UPDATE: The canvas is loading properly if I add the game object to mounted().

data() {
    return {  
      initialize: true,
      game: null,
    };
  },
 mounted() {
    this.game = {...}

Is this the right way to solve this? Would there be any problem moving forward?

Also, now I get the following warnings in the console,

[Vue warn]: The `isCustomElement` config option is only respected when using the runtime compiler.If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead- for example, via the `compilerOptions` option in vue-loader: https://vue-loader.vuejs.org/options.html#compileroptions.

2. (This pops up every time there's a change in the DOM)

[Vue warn]: Failed to resolve component: ion-phaser 
  at <Activity> 
  at <App>

3. (I didn't add AudioContext though)

ion-phaser.entry.js?6751:61407 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

4. (This comes up after a while)

ion-phaser.entry.js?6751:38987 [Violation] 'requestAnimationFrame' handler took 160ms

I'm not sure if these warnings have anything to do with the changes I made. Please let me know if I should open a new issue for these.

[jdnichollsc]

I think that's ok. are you using audio from your game? Some browsers like Chrome requires a gesture to enable audio from Canvas :)

[VivianManohar]

Good to know... 😃

The AudioContext error shows up even with the basic example code. But I think it would be great if you could guide me on getting rid of the following warning particularly, as it's running for every small change (like at every step of moving a range slider)!

[Vue warn]: Failed to resolve component: ion-phaser 
  at <Activity> 
  at <App>

[jdnichollsc]

Please let me know if this issue persist with the last version, thanks!

[jdnichollsc]

It looks like I need to publish another package to support Vue3, stay tuned ionic-team/stencil-ds-output-targets#77

[peterczg]

@VivianManohar I encountered the same problem just now, when I saw some source code of this repo, I found that the package is built for webpack , which means it's not compatible with vitejs app. So why not just using traditional vue cli -- @vue/cli to create a webpack-based vue3 app, turns out working fine for me.