Vue Guide
Composables and Bridge
Reach the current game or scene, subscribe to low-frequency state, and connect DOM UI to Phaser through typed events.
The composables expose Phaser state without trying to mirror the engine into deep Vue reactivity. Most values use shallow refs or explicit updates.
Bridge events
Use a typed bridge when DOM UI needs to send intent into a scene or when scene code needs to fan out low-frequency events.
src/bridge.ts
import { usePhaserBridge } from '@onmax/phaser-vue'
interface HudBridge {
'hud:boost': { amount: number }
}
const bridge = usePhaserBridge<HudBridge>('demo')
bridge?.emit('hud:boost', { amount: 1 })
Scene and game access
src/composables/useGameHandles.ts
const game = usePhaserGame('demo')
const scene = usePhaserScene('main')
const activeScene = useActivePhaserScene()
Use instanceId lookups when the DOM control lives outside the game subtree. Use the injected scene scope when the component already sits under PhaserScene.
Registry state
usePhaserRegistry() subscribes to Phaser registry changes and copies the current registry values into a reactive object for low-frequency UI state.
src/composables/useHud.ts
const registry = usePhaserRegistry<{ score: number }>('hud')
watch(() => registry.state.score, (score) => {
console.log('Low-frequency score update:', score)
})
Input helpers
usePhaserPointer()tracks the active pointer, world coordinates, andisDown.usePhaserKeyboard()creates keyed keyboard bindings from the active scene.useGameEvent()anduseSceneEvent()attach directly to Phaser event emitters.usePhaserAssetUrl()resolves asset URLs against the host or plugin defaults.
The bridge is for orchestration, not for streaming every frame of gameplay state into Vue. Emit intent and low-frequency state changes instead.