Open VivianManohar opened 3 years ago
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 👍
@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.
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,
1.
[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.
[Vue warn]: Failed to resolve component: ion-phaser
at <Activity>
at <App>
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
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.
I think that's ok. are you using audio from your game? Some browsers like Chrome requires a gesture to enable audio from Canvas :)
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>
Please let me know if this issue persist with the last version, thanks!
It looks like I need to publish another package to support Vue3, stay tuned https://github.com/ionic-team/stencil-ds-output-targets/issues/77
@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.
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,
`