Vue Guide

Primitives

Create a small set of Phaser objects declaratively when scene setup is simple and low-frequency.

The primitive layer stays intentionally small in this alpha. Each primitive creates one Phaser object, patches supported mutable props, and destroys itself cleanly on unmount.

Available primitives

PhaserContainer
PhaserImage
PhaserSprite
PhaserText

Example

src/App.vue

<PhaserGame :width="800" :height="480" background-color="#16213e">
  <PhaserScene scene-key="main">
    <PhaserContainer :x="32" :y="32">
      <PhaserText text="Score: 120" :style="{ color: '#fff', fontSize: '28px' }" />
    </PhaserContainer>

    <PhaserImage texture="background" :x="400" :y="240" />
    <PhaserSprite texture="player" :x="120" :y="220" />
  </PhaserScene>
</PhaserGame>

Rules the primitives follow

Constructor-only identity props do not trigger hidden destroy-and-recreate behavior.
Mutable display props patch in place through explicit setter maps.
Parent containers work through injected context, not by crawling the Phaser tree.
@ready and object refs expose the raw Phaser object.

Do not drive sprite position from Vue reactivity every frame. Use scene code, tweens, or physics for hot-path updates.

Edit this pageorReport an issue

Scenes

Define managed scenes with stable keys and keep Phaser's scene model intact.

Composables and Bridge

Reach the current game or scene, subscribe to low-frequency state, and connect DOM UI to Phaser through typed events.