I always thought that implementing game UI components as canvas elements in Phaser is pretty cumbersome, since we already have HTML/CSS ready to use in the browser. As a proof of concept that you can separate these concerns, I made a Phaser game that is integrated into a Vue application.
The game screen is done in Phaser, while the UI elements (mostly a sidebar) are done in HTML/CSS. Sharing data / game state between the two frameworks was a little tricky. In the end I’ve done it by sharing a Vuex store instance, which acts as a event listener/emitter that can also hold state.
2 Likes
I really like what you’ve done with Vue and Phaser. Could you explain why you created a separate store for the game? Is it necessary?
Hey, thanks.
The purpose of the store is to share state between Vue and Phaser code, most notably the highscore. If you are talking about game/Store.ts, thats just an abstraction over the Vuex store api. There is only one store.
Hope that helps!
Good example with vue, I’ve working as a web developer using vue for about 3 years, It’s awesome 
1 Like