# \[Phaser 3 - WIP\] Breakout done in Phaser + Vue

**URL:** <https://phaser.discourse.group/t/phaser-3-wip-breakout-done-in-phaser-vue/2658>\
**Category:** Showcase\
**Created:** [June 4, 2019, 10:58am UTC](https://phaser.discourse.group/t/phaser-3-wip-breakout-done-in-phaser-vue/2658 "2019-06-04T10:58:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 4, 2019, 10:58am UTC](https://phaser.discourse.group/t/phaser-3-wip-breakout-done-in-phaser-vue/2658/1 "2019-06-04T10:58:22Z")

</div>

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.

[https://github.com/Sun0fABeach/breakout](https://github.com/Sun0fABeach/breakout)

---

<div class="post-metadata">

**Author:** ![unkrass](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/unkrass/32/3611_2.png) [@unkrass](https://phaser.discourse.group/u/unkrass)\
**Post date:** [June 18, 2020, 7:26am UTC](https://phaser.discourse.group/t/phaser-3-wip-breakout-done-in-phaser-vue/2658/2 "2020-06-18T07:26:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 18, 2020, 8:03am UTC](https://phaser.discourse.group/t/phaser-3-wip-breakout-done-in-phaser-vue/2658/3 "2020-06-18T08:03:37Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Hollow](https://avatars.discourse-cdn.com/v4/letter/h/5f8ce5/32.png) [@Hollow](https://phaser.discourse.group/u/Hollow)\
**Post date:** [June 18, 2020, 2:23pm UTC](https://phaser.discourse.group/t/phaser-3-wip-breakout-done-in-phaser-vue/2658/4 "2020-06-18T14:23:13Z")

</div>

Good example with vue, I’ve working as a web developer using vue for about 3 years, It’s awesome 🙂