Vue Guide

PhaserGame

Use PhaserGame as the host that creates and destroys Phaser.Game and provides the game-level runtime scope.

PhaserGame is the only component that creates Phaser.Game. That keeps lifecycle management boring and predictable.

src/App.vue

<PhaserGame
  instance-id="demo"
  :width="800"
  :height="480"
  pixel-art
  background-color="#0f172a"
  debug
  @ready="onReady"
  @destroyed="onDestroyed"
>
  <PhaserScene scene-key="main" :definition="scene" />
</PhaserGame>

Responsibilities

Mount Phaser into a dedicated container element.
Merge plugin defaults with host props.
Register managed scenes from PhaserScene children and scenes props.
Expose the game, mounted, containerEl, and bridge refs.
Recreate the game when structural config changes and hmrStrategy stays on recreate.

Important props

Prop	Meaning
`config`	Raw Phaser game config. Use it when the convenience props are not enough.
`scenes`	Additional Phaser scene classes or managed scene definitions.
`width`, `height`	Size both the host container and the canvas mount, and flow through to the game config.
`pixelArt`, `transparent`, `backgroundColor`	Common rendering defaults.
`instanceId`	Stable lookup key for `usePhaserGame` and `usePhaserBridge` outside the subtree.
`debug`	Enables the runtime warning path.
`suspendWhenHidden`	Pauses rendering when the document is hidden.
`hmrStrategy`	`recreate` or `preserve`. Only `recreate` is implemented in this alpha.
`assetsBaseUrl`	Default base URL used by `usePhaserAssetUrl`.

Structural changes recreate the game. Treat config, width, height, and other host-level render settings as low-frequency inputs.

Full-parent layout

PhaserGame can fill any parent that already has a concrete size.

src/App.vue

<div class="game-shell">
  <PhaserGame width="100%" height="100%" background-color="#0f172a">
    <PhaserScene scene-key="main" :definition="scene" />
  </PhaserGame>
</div>

Use that pattern instead of wrapping PhaserGame in custom deep CSS just to stretch the host.

Edit this pageorReport an issue

Vue Guide

Learn the host component, scene layer, primitives, composables, and the raw access patterns in @onmax/phaser-vue.

Scenes

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