phaser-vue
Getting Started

First Game

Mount PhaserGame, register a scene, and connect Vue UI to the canvas through the typed bridge.

Your first game should prove the core contract:

  • PhaserGame creates and owns the game instance
  • PhaserScene registers a managed scene
  • the bridge connects DOM UI and scene code without a global singleton

This example uses the Vue runtime directly. The same scene and bridge pattern still applies in Nuxt.

src/App.vue
<script setup lang="ts">
import { definePhaserScene, usePhaserBridge } from '@onmax/phaser-vue'

interface DemoBridge {
  'hud:boost': { amount: number }
}

const scene = definePhaserScene<DemoBridge>({
  key: 'main',
  preload({ scene }) {
    scene.load.image('logo', 'https://labs.phaser.io/assets/sprites/phaser3-logo.png')
  },
  create({ scene, bridge }) {
    scene.add.image(400, 160, 'logo').setScale(0.45)
    const scoreText = scene.add.text(32, 32, 'Score: 0', { color: '#ffffff', fontSize: '28px' })
    let score = 0

    bridge.on('hud:boost', ({ amount }) => {
      score += amount
      scoreText.setText(`Score: ${score}`)
    })
  },
})

const bridge = usePhaserBridge<DemoBridge>('minimal-demo')

function boostScore() {
  bridge?.emit('hud:boost', { amount: 5 })
}
</script>

<template>
  <main>
    <button @click="boostScore">
      Add 5 points
    </button>

    <PhaserGame instance-id="minimal-demo" :width="800" :height="480" background-color="#16213e" debug>
      <PhaserScene scene-key="main" :definition="scene" />
    </PhaserGame>
  </main>
</template>

Verify the result

When this page is wired correctly:

  • the canvas mounts once
  • the Phaser logo renders inside the scene
  • clicking the button increments the score text in the canvas

What each piece owns

  • PhaserGame mounts Phaser into a container element and exposes the game instance.
  • PhaserScene registers a managed scene with a stable key.
  • definePhaserScene keeps lifecycle code in plain Phaser terms.
  • usePhaserBridge returns the per-game bridge so DOM UI can emit events into the scene.
Start with one scene and a typed bridge event. That proves the wiring before you add primitives or multiple scenes.

Next step

Continue with SSR and mounting if you are integrating this into a server-rendered app or a Nuxt codebase.

Installation

Install @onmax/phaser-vue or @onmax/nuxt-phaser and wire the runtime without hiding Phaser.

SSR and Mounting

Keep Phaser client-only, avoid hydration footguns, and choose the right host component in Vue and Nuxt.

Copyright © 2026