VueUIBridge API

Vue.js integration bridge for CASCADA Framework UI management.

Overview

VueUIBridge provides seamless integration between Phaser scenes and Vue.js components through the UIManager system.

Basic Usage

import { VueUIBridge } from "@core/ui/VueUIBridge";
import MainMenuUI from "@game/ui/MainMenuUI.vue";

// Initialize bridge
const vueBridge = new VueUIBridge(uiManager);

// Mount Vue component
vueBridge.mount("main-menu", MainMenuUI, {
  // Component props
});

Methods

mount(id: string, component: any, props?: any)

Mount a Vue component and register it with UIManager.

vueBridge.mount("game-hud", GameHUD, {
  playerHealth: 100,
  score: 0,
});

updateProps(id: string, props: any)

Update props for a mounted Vue component.

vueBridge.updateProps("game-hud", {
  playerHealth: 75,
  score: 1500,
});

unmount(id: string)

Unmount a Vue component and remove it from UIManager.

vueBridge.unmount("main-menu");

Props Management

VueUIBridge automatically handles reactive props:

// Mount with initial props
vueBridge.mount("hud", GameHUD, {
  health: 100,
  score: 0,
});

// Update props reactively
vueBridge.updateProps("hud", {
  health: 75, // Vue component will react to this change
  score: 1500,
});

Event Handling

Vue components can emit events back to Phaser:

// In Vue component
this.$emit("start-game", "classic");

// In Phaser scene
vueBridge.mount("main-menu", MainMenuUI, {
  onStartGame: (mode: string) => {
    console.log(`Starting game mode: ${mode}`);
  },
});

Lifecycle Management

VueUIBridge handles component lifecycle automatically:

export class GameScene extends Phaser.Scene {
  private vueBridge!: VueUIBridge;

  create() {
    this.vueBridge = new VueUIBridge(this.uiManager);

    // Mount UI components
    this.vueBridge.mount("game-hud", GameHUD);
    this.vueBridge.mount("pause-menu", PauseMenu);
  }

  shutdown() {
    // Automatically unmounts all components
    this.vueBridge.unmount("game-hud");
    this.vueBridge.unmount("pause-menu");
  }
}

Best Practices

1. Mount early: Mount Vue components during scene creation
2. Clean props: Use reactive props for dynamic data
3. Event handling: Use Vue events for user interactions
4. Cleanup: Always unmount components when scenes are destroyed

Example Integration

// GameScene.ts
import { VueUIBridge } from "@core/ui/VueUIBridge";
import GameHUD from "@game/ui/GameHUD.vue";

export class GameScene extends Phaser.Scene {
  private vueBridge!: VueUIBridge;
  private playerHealth = 100;

  create() {
    // Initialize Vue bridge
    this.vueBridge = new VueUIBridge(this.uiManager);

    // Mount HUD with reactive props
    this.vueBridge.mount("game-hud", GameHUD, {
      health: this.playerHealth,
      onPause: () => this.pauseGame(),
    });

    // Update health reactively
    this.time.addEvent({
      delay: 1000,
      callback: () => {
        this.playerHealth -= 10;
        this.vueBridge.updateProps("game-hud", {
          health: this.playerHealth,
        });
      },
      loop: true,
    });
  }

  private pauseGame() {
    this.scene.pause();
    this.vueBridge.mount("pause-menu", PauseMenu);
  }
}

<!-- GameHUD.vue -->
<template>
  <div class="game-hud">
    <div class="health-bar">Health: {{ health }}</div>
    <button @click="$emit('pause')">Pause</button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  health: number;
}>();

defineEmits<{
  pause: [];
}>();
</script>

See Also

• UIManager - Core UI management
• GameModeManager - Game mode management
• ViewportManager - Viewport management