SSR and Mounting

Phaser is a browser runtime. The library keeps that boundary explicit by importing Phaser only on mount and by treating the canvas as a client-side concern.

What the core package guarantees

• PhaserGame does not bootstrap Phaser during server render.
• The actual phaser import happens inside onMounted.
• The placeholder slot renders before the game exists.
• Unmounting destroys the game instance and clears scene registrations.

Vue apps with SSR

Use PhaserGame inside a client-only branch when your Vue app renders on the server.

<template>
  <ClientOnly>
    <PhaserGame :width="800" :height="480">
      <PhaserScene scene-key="main" :definition="scene" />
    </PhaserGame>

    <template #fallback>
      <div class="canvas-skeleton" />
    </template>
  </ClientOnly>
</template>

Nuxt apps

The Nuxt module keeps clientOnly: true by default. NuxtPhaserGame wraps the shared host in ClientOnly and forwards the placeholder slot.

Mount timing

Use the host placeholder when you want a stable layout before the canvas appears.

<NuxtPhaserGame instance-id="demo" :width="840" :height="420">
  <template #placeholder>
    <div class="min-h-[420px] rounded-xl border border-dashed border-default" />
  </template>

  <PhaserScene scene-key="demo" :definition="scene" />
</NuxtPhaserGame>

That pattern prevents layout shift while keeping the Phaser runtime out of the server render.