Nuxt Module

Client-only Wrapper

Use NuxtPhaserGame to keep the client-only boundary explicit while still forwarding the shared host props and slots.

NuxtPhaserGame forwards to the shared PhaserGame component and wraps it in ClientOnly when clientOnly stays enabled.

app/pages/index.vue

<script setup lang="ts">
const scene = definePhaserScene({
  key: 'demo',
  create({ scene }) {
    scene.add.text(32, 32, 'Nuxt wrapper ready', { color: '#fff', fontSize: '28px' })
  },
})
</script>

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

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

When to use the wrapper

Use NuxtPhaserGame when you want the default client-only contract.
Use PhaserGame directly when you intentionally set phaser.clientOnly to false and manage the boundary yourself.

Turning clientOnly off does not make Phaser SSR-capable. It only removes the automatic wrapper.

Edit this pageorReport an issue

Runtime Defaults

Configure the Nuxt wrapper defaults that flow into the shared Phaser Vue plugin at runtime.

Examples

Learn the intended workflows through the standalone Vue examples and the Nuxt playground.