Vue Guide

Escape Hatches

Reach raw game, scene, and object instances whenever the abstraction stops helping.

The abstraction stays removable. If a primitive or composable is not the right fit, drop back to raw Phaser without fighting the library.

Raw game and scene access

src/composables/useRawHandles.ts

const game = usePhaserGame('demo')
const scene = usePhaserScene('main')

Those composables return the underlying Phaser refs. From there, you can access the loader, cameras, tweens, physics systems, or scene plugins directly.

Object refs

Use usePhaserObjectRef() or component refs when you need the created object instance.

src/composables/usePlayerRef.ts

import { usePhaserObjectRef } from '@onmax/phaser-vue'
import type Phaser from 'phaser'

const player = usePhaserObjectRef<Phaser.GameObjects.Sprite>()

src/App.vue

<PhaserSprite ref="playerSprite" texture="player" :x="120" :y="220" />

Imperative scene code

Keep per-frame work in the scene itself when that is the honest model.

src/game/runner-scene.ts

export const runnerScene = definePhaserScene({
  key: 'runner',
  create({ scene }) {
    const orb = scene.add.image(160, 180, 'orb').setScale(0.35)
    let velocity = 80

    scene.events.on('update', (_time, delta) => {
      orb.x += velocity * (delta / 1000)
      if (orb.x > 840)
        orb.x = -40
    })
  },
})

If the code reads more clearly in raw Phaser, keep it in raw Phaser. The library should reduce boilerplate, not force a declarative style where it hurts.

Edit this pageorReport an issue

Composables and Bridge

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

Nuxt Module

Configure @onmax/nuxt-phaser without duplicating the shared runtime contract from @onmax/phaser-vue.