@webgui/vue

Deprecated. Use @webgui/client instead.

npm install @webgui/client

-import { ... } from '@webgui/vue'
+import { ... } from '@webgui/client/vue'

The Vue API is unchanged — this package now re-exports @webgui/client/vue, so nothing breaks if you stay. New events and hooks land in @webgui/client only.

---

Requires the WebGUI Minecraft mod (GitHub) to be installed on the client. This library has no effect outside of the mod.

Vue 3 composables and TypeScript types for SPAs running inside the WebGUI Minecraft mod.

WebGUI embeds a Chromium browser (via MCEF) in-game and injects window.webgui into every page. This library wraps that API in Vue reactivity — refs that update as the game pushes data, no plugin required.

Installation

npm install @webgui/vue

Requires Vue 3 as a peer dependency.

Quick start

<script setup lang="ts">
import { useWebGUIClient, isInMod } from '@webgui/vue';

const client = useWebGUIClient();
</script>

<template>
  <p v-if="!isInMod()">Open this page inside Minecraft.</p>
  <p v-else-if="client">Hello, {{ client.username }}</p>
  <p v-else>Waiting for mod data…</p>
</template>

Composables

Composable	Returns	Notes
useWebGUIClient()	Ref<WebGUIClient | null>	Live player snapshot, updated at 20 TPS.
useWebGUIEntity()	Ref<WebGUIEntity | null>	Entity the player right-clicked to open the GUI.
useWebGUISelector(fn, eq?)	ComputedRef<T | null>	Derived value; only changes when the selection changes.
usePostToGame()	(payload) => void	Send a message to the game.
useCloseGui()	() => void	Close the active GUI/HUD.
useRunCommand()	(command) => void	Run a command as the player (trusted origins only).
useWebGUIToken(name?)	string | null	Signed token from the page URL (static).
useWebGUIEvent(name, fn)	void	Subscribe to a server event; auto-cleaned on scope dispose.

Plain function exports are also available: postToGame, closeGui, runCommand, isInMod, isReady.

import { useWebGUISelector, useRunCommand, useWebGUIEvent } from '@webgui/vue';

const username = useWebGUISelector((c) => c.username);

const run = useRunCommand();
run('spawn');

useWebGUIEvent<{ balance: number }>('walletUpdate', ({ balance }) => {
  // update local state
});

TypeScript

All types are exported from the package root (WebGUIClient, WebGUIEntity, PostToGamePayload, …). The package also augments window.webgui and the webgui:client / webgui:entity events globally.

License

MIT