@play-room/vuejs-adapter

Vue 3 adapter plugin for @play-room/core.

It provides a simple $playroom(...) factory in Vue apps and a composable for creating PlayRoom instances with full core API access.

Install

npm install vue @play-room/core @play-room/vuejs-adapter

Vue Plugin Usage

import { createApp } from "vue";
import playRoomVuePlugin from "@play-room/vuejs-adapter";

const app = createApp(App);

app.use(playRoomVuePlugin, {
  autoRegisterDefaultGames: false,
  defaultRoomOptions: {
    browserStartMode: "inline",
    launcher: { mode: "inline" }
  }
});

app.mount("#app");

In components:

export default {
  mounted() {
    const room = this.$playroom({
      locale: "en",
      theme: "light"
    });

    room.registerDefaultGames({
      config: {
        quizz: { limit: 10 }
      }
    });

    room.renderGamePicker(document.getElementById("playroom-browser") as HTMLElement);
  }
}

Composable Usage

import { usePlayRoom } from "@play-room/vuejs-adapter";

const room = usePlayRoom({
  browserStartMode: "inline",
  launcher: { mode: "inline" }
});

Exposed API

The adapter instance returned by $playroom(...) and usePlayRoom(...) includes:

• getLocale()
• setLocale(locale)
• subscribeLocale(listener)
• getTheme()
• setTheme(theme)
• subscribeTheme(listener)
• listGames()
• queryGames(query)
• registerGame(registration)
• registerGames(registrations)
• registerDefaultGames(options)
• renderGamePicker(container)
• launchGame(gameId, options)
• room (raw PlayRoom instance)

CDN Example

A complete CDN inline (non-floating) example is included at:

• examples/inline-cdn.html

Open it from this package folder after building:

npm run build

Notes

• Browser import maps in the CDN example include both @play-room/core and @play-room/quizz to support default game registration.
• If you prefer only custom games, skip registerDefaultGames(...) and use registerGame(...) directly.